vant 索引城市不对_vant IndexBar实现的城市列表的示例代码

在开发中有个需求是一个选择城市的列表，看了看做成三级联动好像不是特别方便 还是做成一整页可以按导航选取的就可以了

话不多说开始上码

我用的是vant这个ui框架中的IndexBar组件 其实这个组件已经把需要的都弄好了 我们只要处理数据就好了

首先需要引入IndexBar组件 这个就不再赘述了 官网写的很清楚

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

...

这是vant官方文档IndexBar的基本用法文档

IndexAnchor默认是A-Z这里我们不用去自定义

循环部分 我的思路是按每个城市名称的首个字母排序

然后来看看我的数据

{

"id": 101,

"name": "北京市",

"pid": 1,

"code": 0

},

{

"id": 10101,

"name": "天津市",

"pid": 10001,

"code": 0

},

{

"id": 20101,

"name": "石家庄市",

"pid": 20001,

"code": 130100

}

因为之前的数据很乱 所以我让后台老哥重新写了一个只包含市级城市的列表 这样就非常好处理了

第一步先把城市的名称取出

一个简单的循环就OK

let city