vant IndexBar实现的城市列表的示例代码
作者:Resssssss 时间:2024-05-08 09:34:22
在开发中有个需求是一个选择城市的列表,看了看做成 * 联动好像不是特别方便 还是做成一整页可以按导航选取的就可以了
话不多说开始上码
我用的是vant这个ui框架中的IndexBar组件 其实这个组件已经把需要的都弄好了 我们只要处理数据就好了
首先需要引入IndexBar组件 这个就不再赘述了 官网写的很清楚
点击索引栏时,会自动跳转到对应的IndexAnchor锚点位置
<van-index-bar>
<van-index-anchor index="A" />
<van-cell title="文本" />
<van-cell title="文本" />
<van-cell title="文本" />
<van-index-anchor index="B" />
<van-cell title="文本" />
<van-cell title="文本" />
<van-cell title="文本" />
...
</van-index-bar>
这是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 cityNameList = []
for(let p in cityList){
cityNameList.push(cityList[p].name)
}
ok现在我们就把城市的名称存到了cityNameList中了
下面一步就是关键的一步了
直接将数组的首字母取出来并按照A-Z排序
这里用到了一个插件pinyin 用它来将中文的首字母取出来
首先安装
npm install js-pinyin
然后我是在mian.js中引入的
import pinyin from 'js-pinyin'
然后在你的业务页面配置
let pinyin = require('js-pinyin')
pinyin.setOptions({checkPolyphone:false,charCase:0})
然后就可以使用了
直接一个循环达到我们的效果
let firstName = {};
this.FirstPin.forEach((item)=>{
firstName[item] = [];
cityNameList.forEach((el)=>{
let first = 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组件中写一个循环就可以了
<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>
来源:https://segmentfault.com/a/1190000021057413
标签:vant,IndexBar,城市列表
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
python通过pip更新所有已安装的包实现方法
2021-06-04 03:22:34
基于JS实现Android,iOS一个手势动画效果
2024-04-28 09:36:41
![](https://img.aspxhome.com/file/2023/9/132859_0s.gif)
pytorch: tensor类型的构建与相互转换实例
2023-06-14 09:22:57
python筛选出两个文件中重复行的方法
2021-02-16 12:53:04
使用批处理实现mysql的数据库备份与上传
2012-01-05 19:30:23
微信小程序实现富文本图片宽度自适应的方法
2023-10-17 12:44:25
![](https://img.aspxhome.com/file/2023/5/56025_0s.jpg)
Go语言利用Unmarshal解析json字符串的实现
2024-05-09 09:54:25
MySQL实战窗口函数SQL分析班级学生考试成绩及生活消费
2024-01-15 08:56:14
![](https://img.aspxhome.com/file/2023/1/102381_0s.png)
asp去除html的函数代码分析附实例说明
2023-07-02 20:09:18
select into from和insert into select的使用举例详解
2024-01-25 03:27:28
windows10 pycharm下安装pyltp库和加载模型实现语义角色标注的示例代码
2021-11-09 10:58:04
![](https://img.aspxhome.com/file/2023/8/130798_0s.png)
Python GUI和游戏开发从入门到实践
2021-01-09 15:30:47
推荐几款MySQL相关工具
2024-01-23 10:42:12
![](https://img.aspxhome.com/file/2023/9/116789_0s.png)
JavaScript在XHTML中的用法详解
2024-04-17 10:11:04
python工具快速为音视频自动生成字幕(使用说明)
2021-04-14 15:15:26
vue.js实现日历插件使用方法详解
2024-05-13 09:38:43
![](https://img.aspxhome.com/file/2023/8/125278_0s.jpg)
Python利用tkinter实现一个简易番茄钟的示例代码
2021-03-02 17:20:59
![](https://img.aspxhome.com/file/2023/1/101251_0s.png)
Python求解任意闭区间的所有素数
2023-10-12 00:07:12
Django 静态文件配置过程详解
2021-07-08 07:27:53
基于Python实现文件分类器的示例代码
2023-06-02 12:49:10
![](https://img.aspxhome.com/file/2023/9/90279_0s.png)