微信小程序使用vant weapp UI的van-index-bar组件实现城市列表

其中城市列表使用了Vant 官方提供了一份默认的省市区数据

yarn add @vant/area-data

需要把这份数据整理成想要的格式，拿到城市的首字母，进行统计

yarn add pinyin-pro

利用这个依赖包拿到首字母大写

/**
 * 获取中文大写首字母
 */
function getFirstChineseInitial(chineseStr) {
  if (!chineseStr || chineseStr.length === 0) return '';

  const REGEX_CHINESE = /[\u4e00-\u9fa5]/; // 匹配任何一个中文字符
  let initial = chineseStr[0];

  // 寻找第一个中文字符
  for (let i = 0; i < chineseStr.length; i++) {
      if (REGEX_CHINESE.test(chineseStr[i])) {
          initial = chineseStr[i];
          break;
      }
  }

  // 转换为拼音的首字母
  const firstLetter = pinyin(initial, { pattern: 'first',toneType:'none' }).charAt(0).toUpperCase();
  return firstLetter;
}


//在城市选择的js文件的onload钩子中处理

import {
  areaList
} from '@vant/area-data';

  onLoad(options) {
    let cityList = []
    let pyList = []
    let list = []
    for (let key in areaList.city_list) {
      cityList.push({
        id: key,
        city_name: areaList.city_list[key]
      })
    }
    cityList = cityList.map(item => {
      item.py = getFirstChineseInitial(item.city_name)
      pyList.push(item.py)
      return item
    })
    pyList = [...new Set(pyList)].sort((a, b) => {
      if (a < b) {
        return -1;
      }
      if (a > b) {
        return 1;
      }
      return 0;
    })

    pyList.forEach(item1 => {
      let pyObject = {
        firstLetter: item1,
        list: []
      }
      cityList.forEach(item2 => {
        if (item1 === item2.py) {
          pyObject.list.push(item2)
        }
      })
      list.push(pyObject)
      console.log(pyObject)
    })
    this.setData({
      cityList: list,
      pyList
    })

  },

index.wxml文件里直接使用即可

<van-index-bar index-list="{{ pyList }}" highlight-color="#F34C00">
  <view wx:for="{{cityList}}" wx:key="firstLetter">
    <van-index-anchor index="{{item.firstLetter}}">{{item.firstLetter}}</van-index-anchor>
    <van-cell title="{{item2.city_name}}" wx:for="{{item.list}}" wx:for-item="item2" wx:key="id" />
  </view>

</van-index-bar>

注意需要再json文件中声明组件

{
  "usingComponents": {
    "van-index-bar": "@vant/weapp/index-bar/index",
    "van-index-anchor": "@vant/weapp/index-anchor/index"
  },
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "选择城市"
}