在开发中有个需求是一个选择城市的列的表,看了看做成三级联动好像不是特别方便还是做成一整页可以按导航选取的就可以了
话不多说开始上码
我用的是vant这个ui框架中的IndexBar组件其实这个组件已经把需要的都弄好了我们只要处理数据就好了
首先需要引入IndexBar组件这个就不再赘述了官网写的很清楚
点击索引栏时,会自动跳转到对应的IndexAnchor锚点位置
& lt; van-index-bar>
& lt; van-index-anchor指数=A/比;
& lt; van-cell title=拔摹北?比;
& lt; van-cell title=拔摹北?比;
& lt; van-cell title=拔摹北?比;
& lt; van-index-anchor指数=癇”/比;
& lt; van-cell title=拔摹北?比;
& lt; van-cell title=拔摹北?比;
& lt; van-cell title=拔摹北?比;
…
& lt;/van-index-bar>
这是vant官方文档IndexBar的基本用法文档
IndexAnchor默认是所有这里我们不用去自定义
循环部分我的思路是按每个城市名称的首个字母排序
然后来看看我的数据
{
“id”: 101年,
“名称”:“北京市”,
“pid”: 1、
“代码”:0
}，
{
“id”: 10101年,
“名称”:“天津市”,
“pid”: 10001年,
“代码”:0
}，
{
“id”: 20101年,
“名称”:“石家庄市”,
“pid”: 20001年,
“代码”:130100
}
因为之前的数据很乱所以我让后台老哥重新写了一个只包含市级城市的列表这样就非常好处理了
第一步先把城市的名称取出
一个简单的循环就好了
让cityNameList=[]
(让p cityList) {
cityNameList.push (cityList [p] . name)
}
好现在我们就把城市的名称存到了cityNameList中了
下面一步就是关键的一步了
直接将数组的首字母取出来并按照所有排序
这里用到了一个插件拼音用它来将中文的首字母取出来
首先安装
npm安装js-pinyin
然后我是在mian.js中引入的
从“js-pinyin”进口拼音
然后在你的业务页面配置
让拼音=要求(“js-pinyin”)
pinyin.setOptions ({checkPolyphone:假的,charCase: 0})
然后就可以使用了
直接一个循环达到我们的效果
让firstName={};
this.FirstPin.forEach((项)=祝辞{
firstName[项目]=[];
cityNameList.forEach ((el)=祝辞{
让第一次=pinyin.getFullChars (el) .substring (0,1);
如果(第一项==){
firstName[项目].push (el)
}
})
})
这里的FirstPin是在数据中定义的一个数组,用来存储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: {
答:["阿拉善盟”,“鞍山市”)
}
最后在InderBar组件中写一个循环就可以了
& lt; van-index-bar类=癷ndexBar”:粘性=癴alse”highlight-color=" # fb6463 "比;
& lt; van-index-anchor v=" firstName(项目、索引)”:关键=爸甘?指数=爸甘北?
& lt;跨类=" indexWord "在{{指数}}& lt;/span>
& lt; van-cell @click=" chooseCity citem " v=跋?citem cindex)”:关键=癱index”: title=癱item”/比;
& lt;/van-index-anchor>
& lt;/van-index-bar>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
