vant IndexBar实现的城市列表的示例代码

2020-06-12 20:45:27易采站长站整理


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

然后我的firstName的格式是这样的


firName:{
A:["阿拉善盟","鞍山市"]}

最后在InderBar组件中写一个循环就可以了


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