vant 中使用indexBar 进行城市选择列表

在开发中，有城市选择页面，采用vant中的indexBar和全国城市列表json数据，直接上代码：

vant官方介绍：https://youzan.github.io/vant/#/zh-CN/index-bar

城市json数据：https://github.com/wwjjss/city

基础用法

点击索引栏时，会自动跳转到对应的IndexAnchor锚点位置

<van-index-bar>
  <van-index-anchor index="A" />
  <van-cell title="文本" />
  <van-cell title="文本" />
  <van-cell title="文本" />

  <van-index-anchor index="B" />
  <van-cell title="文本" />
  <van-cell title="文本" />
  <van-cell title="文本" />

  ...
</van-index-bar>

 第一步：获取城市json数据使用cityDts保存城市list：（我是通过本地json数据获取）

json数据格式如下：

第二步：使用官方代码遍历json数据cityDts:

<van-index-bar class="indexBar" :sticky="false" highlight-color="#AE853A">
      <van-index-anchor v-for="(item,index) in cityDts" :key="index" :index="item.initial">
        <span class="indexWord">{{item.initial}}</span>
        <van-cell
          @click="chooseCity(citem)"
          v-for="(citem,cindex) in item.list"
          :key="cindex"
          :title="citem.name"
        />
      </van-index-anchor>
    </van-index-bar>

完成，预览图如下：