小程序实现根据A-Z排序的不同城市索引栏

小程序里面实现如下索引栏功能

根据A到Z城市排序，点击右侧可直接跳转到对应首字母的城市

引用了vant weapp中IndexBar索引栏

第一步：在app.json或index.json中引入组件

"usingComponents": {
  "van-index-bar": "@vant/weapp/index-bar/index",
  "van-index-anchor": "@vant/weapp/index-anchor/index"
}

以下为我得代码中引入

 

第二步：在页面中使用索引栏

<van-index-bar :index-list="indexList" :sticky="false">
   <view v-for="(item, index) in customerList" :key="index">
      <van-index-anchor :index="item.firstLetter">标题1</van-index-anchor>
      <van-cell
         v-for="(i, v) in item.list"
         :key="index"
         :title="i.name"
         @click="areaEvent(i)"
      />
   </view>
</van-index-bar>

解释一下以上代码

customerList是从后端请求的数据，数据格式为

[
    {
    "firstLetter"："A",
    "list":[
        {"code":"230205","name":"昂昂溪里","level":2},
        {"code":"513231","name":"阿巴嘎旗","level":2},
                ......
        ]
    },
    {
    "firstLetter"："b",
    "list":[
        {"code":"440306","name":"宝安区","level":2},
        {"code":"231181","name":"北安市","level":2},
                ......
        ]
    },
                ......
                ......
]

van-index-anchor 表示大的标题：例如A,B,C

van-cell 表示大标题下面的内容  将每个对象里的list进行循环
index-list带代表右侧索引数组。

        ["A","B","C","D","E","F","G","H","J","K","L","M","N","O","P","Q","R","S","T","W","X","Y","Z",]

 

以上是我实现索引栏的方法，详情可以参考官网，了解相关api

过程中我还遇到了一个问题，全国的省份有三千多条，页码加载了5秒左右才能显示，体验效果较差，我做了一个过渡效果。

有没有哪位大佬能告诉我该怎么优化数据加载过慢的问题！！！万分感谢