@adactive/az-scroller 中文文档教程

Question

A to Z scrolling list

使用 <3 打造更轻松的触控体验。

Getting started

npm i --save @adactive/az-scroller

或者

yarn add @adactive/az-scroller

How to use

唯一的非可选道具是您要显示的列表。 它必须正确格式化，与 列表分为 Sections，每个 Section 都有一个 Header 对象和一个 Items 数组。

请参见下面的示例：

    import AzScroller from "@adactive/az-scroller";

    // ...

    const listExample = [
         {
             header: {
                 type: 'SectionHeader',
                 letter: 'A',
             },
             items: [
                 { text: 'ABEL' },
                 { text: 'ABRAHAM' },
                 { text: 'ACHILLE' },
                 { text: 'ADAM' },
                 { text: 'ADÈLE' },
                 { text: 'ADELINE' },
                 { text: 'ADOLPHE' },
                 { text: 'ANTOINE' },
             ],
         },
         {
             header: {
                 type: 'SectionHeader',
                 letter: 'B',
             },
             items: [
                 { text: 'BAPTISTE' },
                 { text: 'BARBARA' },
                 { text: 'BARNABÉ' },
                 { text: 'BARTHÉLÉMY' },
                 { text: 'BASILE' },
             ],
         },
         {
             header: {
                 type: 'SectionHeader',
                 letter: 'C',
             },
             items: [
                 { text: 'CERISE' },
                 { text: 'CÉSAIRE' },
                 { text: 'CHARLES' },
                 { text: 'CHARLOT' },
                 { text: 'CHRISTIAN' },
             ],
         },
         {
             header: {
                 type: 'SectionHeader',
                 letter: 'E',
             },
             items: [
                 { text: 'ESTELLE' },
                 { text: 'ETHAN' },
                 { text: 'ÉTIENNE' },
                 { text: 'EUGÈNE' },
             ],
         },
         {
             header: {
                 type: 'SectionHeader',
                 letter: 'M',
             },
             items: [
                 { text: 'MICHÈLE' },
                 { text: 'MOROINE' },
                 { text: 'MURIELLE' },
                 { text: 'MYLÈNE' },
             ],
         },
         {
             header: {
                 type: 'SectionHeader',
                 letter: 'S',
             },
             items: [
                 { text: 'SEBASTIAN' },
                 { text: 'SEREN' },
                 { text: 'STANLEY' },
                 { text: 'STÉPHANE' },
                 { text: 'SYBILLE' },
                 { text: 'SYLVAIN' },
             ],
         },
         {
             header: {
                 type: 'SectionHeader',
                 letter: 'W',
             },
             items: [
                 { text: 'WANDY' },
                 { text: 'WAN' },
                 { text: 'WREN' },
                 { text: 'WILGELM' },
                 { text: 'WADE' },
                 { text: 'WILLIAM' },
                 { text: 'WINOC' },
             ],
         },
     ];

    <AzScroller list={listExample} />

Header 对象必须有一个 type: 'SectionHeader' 和一个 letter: 'anyString' 字段，那些 是必须的。 另外，您不得在任何 Items 中使用 letter 字段。

否则，在 Header 和 Items< /em> 你可以调整其他字段并根据需要命名它们，添加字段等。 您将能够在 renderListItem & 中检索这些字段 renderListSectionHeader 渲染 方法。

Optional props

type PropsType = {|
  list: ListType,
  renderSectionItem?: ?(item: SectionItemType, key: string | number) => React.Node,
  renderSectionHeader?: ?(header: SectionHeaderType, key: string | number) => React.Node,
  shouldShowSectionHeaders?: boolean,
  sectionItemHeight?: ?number,
  sectionHeaderHeight?: ?number,
  wrapperClassNames?: Array<string>,
  wrapperStyle?: ?CSSStyleDeclaration,
  listClassNames?: Array<string>,
  listStyle?: ?CSSStyleDeclaration,
  alphabetListClassNames?: Array<string>,
  alphabetListStyle?: ?CSSStyleDeclaration,
  letterClassNames?: Array<string>,
  letterStyle?: ?CSSStyleDeclaration,
  letterHighlightedClassNames?: Array<string>,
  letterHighlightedStyle?: ?CSSStyleDeclaration,
|};

list

要滚动的项目列表。

renderSectionItem

一个函数，您应该提供该函数并将为每个 listItem 调用该函数。 应该返回一个 JSX 组件。

renderSectionHeader

与 renderSectionItem 相同，但目的是呈现列表部分标题。

shouldShowSectionHeaders

显示您是否需要显示每个部分的高度，或者您只需要一个没有任何标题的列表。

sectionItemHeight & sectionHeaderHeight

应提供以确保流畅的滚动体验。 最简单的方法是设置一个固定的 高度在 2 渲染方法中并将它们作为道具传递给这里（参见默认道具部分 一个例子）。 如果你传递render方法，不要忘记传递相应的高度，否则默认 将使用默认道具的高度，这可能会导致 UI 问题。有关该主题的更多信息， 看看这里使用的 react-list 包： https://www.npmjs.com/package/react-list

listClassNames & listStyle

修改 list wrapper element 的样式使用 CSS 类名或内联样式对象，或两者兼而有之。

alphabetListClassNames & alphabetListStyle

使用 CSS 类名或内联样式对象，或同时使用两者修改 alphabetList 的包装器 的样式。

letterClassNames & letterStyle

使用 CSS 类名或内联样式对象，或两者同时修改 alphabetList 中每个字母 的样式。

letterHighlightedClassNames & letterHighlightedStyle

使用 CSS 类名和/或内联样式对象修改 alphabetList 中突出显示的字母 的样式。

请注意，classnames 属性是一个字符串数组（一个字符串代表您要传递的每个类名） 并且没有带空格的单个字符串。 所以如果你只想传递一个类名 'letter-class-name' 给 letter 例如，您必须传递

<AzScroller
    list={listExample}
    letterClassNames={["letter-class-name"]}
/>

Exported Types

export type SectionItemType = Object;
export type SectionHeaderType = {
  type: 'SectionHeader',
  letter: string,
};
export type ListSectionType = {|
    header: SectionHeaderType,
    items: Array<SectionItemType>,
|};
export type ListType = Array<ListSectionType>;

Default props

static defaultProps = {
    renderSectionItem: (item: SectionItemType, key: string | number) => (
        <div
            key={key}
            style={{
                boxSizing: 'border-box',
                height: '30px',
                padding: '10px 20px',
            }}
        >
            {item.text}
        </div>
    ),
    renderSectionHeader: (header: SectionHeaderType, key: string | number) => (
        <div
            key={key}
            style={{
                boxSizing: 'border-box',
                height: '50px',
                padding: '20px 20px',
                fontWeight: 'bold',
                backgroundColor: 'lightgrey',
            }}
        >
            {header.letter}
        </div>
    ),
    shouldShowSectionHeaders: false,
    sectionItemHeight: null,
    sectionHeaderHeight: null,
    wrapperClassNames: [],
    wrapperStyle: null,
    listClassNames: [],
    listStyle: null,
    alphabetListClassNames: [],
    alphabetListStyle: null,
    letterClassNames: [],
    letterStyle: null,
    letterHighlightedClassNames: [],
    letterHighlightedStyle: null,
};

static defaultStyleProps = {
    wrapperStyle: {
        boxSizing: 'border-box',
        width: '500px',
        height: '500px',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-between',
    },
    listStyle: {
        overflow: 'auto',
        maxHeight: '80%',
    },
    alphabetListStyle: {
        boxSizing: 'border-box',
        width: '100%',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: '20px 10px',
    },
    letterStyle: {
        outline: 'none',
    },
    letterHighlightedStyle: {
        color: 'red',
        fontWeight: 'bold',
    },
};

默认样式属性 将在以下情况下应用：

• of course the corresponding style prop is not passed
• AND the corresponding classnames prop is not passed

这意味着传递类名或内联样式对象将停用相应的样式 默认样式

Copy component inside your project src folder

它将复制项目中的组件，在 src/adsum-az-scroller 中。

npx @adactive/az-scroller copy