index-bar 索引栏

索引组件是一种常见的用户界面元素，通常用于快速导航和定位长列表或大数据集。它提供了一个字母或数字的列表，用户可以点击其中一个索引项，以便快速滚动到列表中对应的部分。索引组件通常用于联系人列表、城市选择、字母排序等场景。

Props参数

名称	类型	是否必传	默认值	描述
defaultActiveIndex	string	否	-	默认激活的索引
height	number	否	-	容器高度 默认为容器剩余高度
sticky	boolean	否	true	标题是否钉在顶部
header	{ /** 头部索引。唯一标识 / index: string /* 锚点 / brief?: ReactNode /* 渲染node */ headerRender?: ReactNode }	否	-	头部内容 插在头部跟随滚动

示例

import { memo, FC, useState } from 'react'
import MMIndexBar from '../../components/index-bar'
import Taro from '@tarojs/taro'
import MMCell from '../../components/cell'
import MMCard from '../../components/card'
import MMButton from '../../components/button'
import MMSpace from '../../components/space'
import { useToast } from '../../components'
import MMPageContainer from '../_components/page-container'

interface IIndexBarProps {}

const Component: FC<IIndexBarProps> = () => {
  const [toast] = useToast()
  const { citys } = useCitys()

  return (
    <MMPageContainer title="索引栏">
      <MMIndexBar
        header={{
          index: 'header',
          brief: '#',
          headerRender: (
            <MMCard title="热门城市">
              <MMSpace>
                <MMButton size="small">上海</MMButton>
                <MMButton size="small">北京</MMButton>
                <MMButton size="small">广州</MMButton>
              </MMSpace>
            </MMCard>
          )
        }}
        onIndexChange={(cindex) => {
          // eslint-disable-next-line no-console
          console.log('索引变了', cindex)
        }}
      >
        {citys.map((py) => {
          return (
            <MMIndexBar.Anchor key={py.index} index={py.index} title={py.index} brief={`${py.index}1`}>
              {py.items.map((item) => {
                return (
                  <MMCell
                    key={`${py.index}${item}`}
                    title={item}
                    onClick={() => {
                      Taro.showToast({ title: `${item}`, icon: 'none' })
                    }}
                  />
                )
              })}
            </MMIndexBar.Anchor>
          )
        })}
      </MMIndexBar>
    </MMPageContainer>
  )
}

const IndexBarPage = memo(Component)
export default IndexBarPage

function useCitys() {
  const [citys] = useState([
    { index: 'A', items: ['安庆', '阿泰勒', '安康', '阿克苏'] },
    { index: 'B', items: ['北京', '包头', '北海', '百色', '保山'] },
    { index: 'C', items: ['重庆', '成都', '长沙', '长治', '长春', '常州', '昌都', '朝阳', '常德', '长白山', '赤峰'] },
    { index: 'D', items: ['大同', '大连', '达县', '东营', '大庆', '丹东', '大理', '敦煌'] },
    { index: 'E', items: ['鄂尔多斯', '恩施'] },
    { index: 'F', items: ['福州', '阜阳'] },
    { index: 'G', items: ['广州', '贵阳', '桂林', '广元', '格尔木'] },
    { index: 'H', items: ['杭州', '合肥', '呼和浩特', '哈密', '黑河', '海拉尔', '哈尔滨', '海口', '黄山', '邯郸', '汉中', '和田'] },
    { index: 'J', items: ['晋江', '锦州', '景德镇', '嘉峪关', '井冈山', '济宁', '九江', '佳木斯', '济南'] },
    { index: 'K', items: ['喀什', '昆明', '康定', '克拉玛依', '库尔勒', '库车'] },
    { index: 'L', items: ['兰州', '洛阳', '丽江', '林芝', '柳州', '泸州', '连云港', '黎平', '连成', '拉萨', '临沧', '临沂'] },
    { index: 'M', items: ['芒市', '牡丹江', '满洲里', '绵阳', '梅县', '漠河'] },
    { index: 'N', items: ['南京', '南昌', '内蒙古', '南充', '南宁', '南阳', '南通', '那拉提', '宁波'] },
    { index: 'P', items: ['攀枝花'] },
    { index: 'Q', items: ['青岛', '衢州', '秦皇岛', '庆阳', '齐齐哈尔'] },
    { index: 'S', items: ['上海', '深圳', '苏州', '三亚', '石家庄', '沈阳', '思茅'] },
    { index: 'T', items: ['天津', '铜仁', '塔城', '腾冲', '台州', '通辽', '太原'] },
    { index: 'W', items: ['威海', '梧州', '文山', '无锡', '潍坊', '武夷山', '乌兰浩特', '温州', '乌鲁木齐', '万州', '乌海'] },
    { index: 'X', items: ['厦门', '西安', '西藏', '兴义', '西昌', '襄樊', '西宁', '锡林浩特', '西双版纳', '徐州'] },
    { index: 'Y', items: ['义乌', '永州', '榆林', '延安', '运城', '烟台', '银川', '宜昌', '宜宾', '盐城', '延吉', '玉树', '伊宁'] },
    { index: 'Z', items: ['珠海', '昭通', '张家界', '舟山', '郑州', '中卫', '芷江', '湛江'] }
  ])

  return {
    citys
  }
}