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

2023-08-08 13:28:04 57

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

话不多说开始上码

我用的是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

letcityNameList=[]
for(letpincityList){
cityNameList.push(cityList[p].name)
}

ok现在我们就把城市的名称存到了cityNameList中了

下面一步就是关键的一步了
直接将数组的首字母取出来并按照A-Z排序
这里用到了一个插件pinyin用它来将中文的首字母取出来
首先安装

npminstalljs-pinyin

然后我是在mian.js中引入的

importpinyinfrom'js-pinyin'

然后在你的业务页面配置

letpinyin=require('js-pinyin')
pinyin.setOptions({checkPolyphone:false,charCase:0})

然后就可以使用了

直接一个循环达到我们的效果

letfirstName={};
this.FirstPin.forEach((item)=>{
firstName[item]=[];
cityNameList.forEach((el)=>{
letfirst=pinyin.getFullChars(el).substring(0,1);
if(first==item){
firstName[item].push(el)
}
})
})

这里的FirstPin是在data中定义的一个数组，用来存储A-Z

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组件中写一个循环就可以了



{{index}}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

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

热门推荐

随机推荐