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


Posted in Javascript onNovember 20, 2019

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

话不多说开始上码

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
Aug 09 Javascript
javascript模拟php函数in_array
Apr 27 Javascript
JS实现生成会变大变小的圆环实例
Aug 05 Javascript
jQuery实现下拉加载功能实例代码
Apr 01 Javascript
JS判断iframe是否加载完成的方法
Aug 03 Javascript
javascript replace()第二个参数为函数时的参数用法
Dec 26 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
Jun 28 Javascript
基于javaScript的this指向总结
Jul 22 Javascript
JS 仿支付宝input文本输入框放大组件的实例
Nov 14 Javascript
基于bootstrap页面渲染的问题解决方法
Aug 09 Javascript
Vue中用props给data赋初始值遇到的问题解决
Nov 27 Javascript
js实现简单五子棋游戏
May 28 Javascript
Vue中rem与postcss-pxtorem的应用详解
Nov 20 #Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
Nov 20 #Javascript
vue3.0中使用postcss-pxtorem的具体方法
Nov 20 #Javascript
基于Vue+ElementUI的省市区地址选择通用组件
Nov 20 #Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
Nov 20 #Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
Nov 20 #Javascript
详解Nuxt.js 实战集锦
Nov 19 #Javascript
You might like
对象特征检测法判断浏览器对javascript对象的支持
2009/07/25 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
js css后面所带参数含义介绍
2013/08/18 Javascript
JQuery Highcharts 动态生成图表的方法
2013/11/15 Javascript
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
JavaScript中使用concat()方法拼接字符串的教程
2015/06/06 Javascript
JavaScript中reduce()方法的使用详解
2015/06/09 Javascript
Angularjs的ng-repeat中去除重复数据的方法
2016/08/05 Javascript
Angular.Js的自动化测试详解
2016/12/09 Javascript
JS前向后瞻正则表达式定义与用法示例
2016/12/27 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
2017/01/03 Javascript
浅谈vue中数据双向绑定的实现原理
2017/09/14 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
2017/10/27 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
2018/02/08 Javascript
Vue组件库发布到npm详解
2018/02/17 Javascript
微信小程序转化为uni-app项目的方法示例
2020/05/22 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
2020/07/12 Javascript
JavaScript实现商品评价五星好评
2020/11/30 Javascript
[02:47]3.19DOTA2发布会 国服成长历程回顾
2014/03/25 DOTA
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
Python实现连接两个无规则列表后删除重复元素并升序排序的方法
2018/02/05 Python
Python数据可视化库seaborn的使用总结
2019/01/15 Python
python实现微信定时每天和女友发送消息
2019/04/29 Python
Python 获取命令行参数内容及参数个数的实例
2019/12/20 Python
小结Python的反射机制
2020/09/28 Python
使用HTML5原生对话框元素并轻松创建模态框组件
2019/03/06 HTML / CSS
Java基础面试题
2012/11/02 面试题
企业管理专业个人求职信范文
2013/09/24 职场文书
办公室驾驶员岗位职责
2013/11/15 职场文书
工厂保洁员岗位职责
2013/12/04 职场文书
小学运动会入场式解说词
2014/02/18 职场文书
教师党员岗位承诺书
2014/05/29 职场文书
2015年建筑工程工作总结
2015/05/13 职场文书
离婚协议书范文2016
2016/03/18 职场文书
《悬崖边的树》读后感2篇
2019/12/02 职场文书
服务器nginx权限被拒绝解决案例
2022/09/23 Servers