Taroify

IndexList 索引栏

介绍

用于列表的索引分类显示和快速定位。

引入

import { IndexList } from "@taroify/core"

代码演示

基础用法

点击索引栏时，会自动跳转到对应的 IndexList.Anchor 锚点位置。

function BasicIndexList() {
  const indexList: string[] = []
  const charCodeOfA = "A".charCodeAt(0)

  for (let i = 0; i < 26; i++) {
    indexList.push(String.fromCharCode(charCodeOfA + i))
  }

  return (
    <IndexList>
      {_.map(indexList, (index) => {
        return (
          <Fragment key={index}>
            <IndexList.Anchor index={index} />
            <Cell title="文本" />
            <Cell title="文本" />
            <Cell title="文本" />
          </Fragment>
        )
      })}
    </IndexList>
  )
}

自定义索引列表

function CustomIndexList() {
  const customIndexList = [1, 2, 3, 4, 5, 6, 8, 9, 10]

  return (
    <IndexList>
      {_.map(customIndexList, (index) => {
        return (
          <Fragment key={index}>
            <IndexList.Anchor index={index}>标题{index}</IndexList.Anchor>
            <Cell title="文本" />
            <Cell title="文本" />
            <Cell title="文本" />
          </Fragment>
        )
      })}
    </IndexList>
  )
}

配合弹窗使用

当在弹窗内使用时，请传入 inner 属性以便于组件知道是在底部弹窗内，用于启用 ScrollView。如果自定义了弹窗弹出动画时间，请手动设置 delay 属性，值为动画时长。

function PopupIndexBar() {
  const [open, setOpen] = useState(false)

  const indexList: string[] = []
  const charCodeOfA = "A".charCodeAt(0)

  for (let i = 0; i < 26; i++) {
    indexList.push(String.fromCharCode(charCodeOfA + i))
  }

  return (
    <>
      <Button onClick={() => setOpen(true)}>打开弹窗</Button>
      <Popup
        open={open}
        style={{ height: "80%" }}
        placement="bottom"
        rounded
        onClose={() => setOpen(false)}
      >
        <Popup.Close />
        <View className="index-list-demo_wrap">
          <IndexList inner delay={300}>
            {_.map(indexList, (index) => {
              return (
                <Fragment key={index}>
                  <IndexList.Anchor index={index} />
                  <Cell title="文本" />
                  <Cell title="文本" />
                  <Cell title="文本" />
                </Fragment>
              )
            })}
          </IndexList>
        </View>
      </Popup>
    </>
  )
}

API

IndexList Props

参数	说明	类型	默认值
sticky	是否开启锚点自动吸顶	boolean	`true`
stickyOffsetTop	锚点自动吸顶时与顶部的距离	number \| string	`0`
inner	是否是底部弹窗内使用	boolean	`false`
delay	inner 为 `true`，并且自定义了弹窗弹出动画时长时设置	number	inner 为 true 时候是 `300`，false 时候是 `0`
showSidebar	是否显示索引	boolean	`true`

IndexList Events

事件名	说明	回调参数
onChange	索引位变化时触发	current: number, anchor: number \| string

IndexList Method

通过 ref 可以获取到 IndexList 实例并调用实例方法

方法名	说明	参数	返回值
scrollTo	跳转指定位置	index	-

IndexList.Anchor Props

参数	说明	类型	默认值
index	索引字符	number \| string	-
children	索引内容	ReactNode	-

IndexList Events

事件名	说明	回调参数
onSelect	点击索引栏的字符时触发	index: number \| string
onChange	当前高亮的索引字符变化时触发	index: number \| string

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称	默认值	描述
—index-list-sidebar-z-index	2	-
—index-list-index-font-size	var(—font-size-xs)	-
—index-list-index-line-height	var(—line-height-xs)	-
—index-list-index-font-weight	var(—font-weight-bold)	-
—index-list-index-padding	0 var(—padding-xs 0 var(—padding-md)	-
—index-list-index-active-color	var(—danger-color)	-
—index-anchor-z-index	1	-
—index-anchor-padding	0 var(—padding-md)	-
—index-anchor-color	var(—text-color)	-
—index-anchor-font-weight	var(—font-weight-bold)	-
—index-anchor-font-size	var(—font-size-md)	-
—index-anchor-line-height	32px $hd*	-
—index-anchor-background-color	transparent	-
—index-anchor-sticky-color	var(—danger-color)	-
—index-anchor-sticky-background-color	var(—white)	-