antd-mobile+pinyin-pro+ IndexBar组件实现电话簿

模拟数据

name:string

phone:string,

首先

 安装 pinyin-pro 

import { pinyin } from 'pinyin-pro'

获取模拟数据并过滤得到数组

  const groups = Array(26)

    .fill('')

    .map((_, i) => ({

      title: String.fromCharCode(charCodeOfA + i),

      items: cityList.filter((item) => {

        //pinyin获取名字首字母    toneType去掉音调，例如安姓

        return (pinyin(item.name,{toneType:'none'}).charAt(0).toUpperCase() === String.fromCharCode(charCodeOfA + i))

      })

    }))

输出即可

如果需要将右侧索引列没有相应数据的字母去除仅需将 groups的数据过滤重写循环即可