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 相关文章推荐
JQquery的一些使用心得分享
Aug 01 Javascript
DWR实现模拟Google搜索效果实现原理及代码
Jan 30 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
Oct 10 Javascript
贴近用户体验的Jquery日期、时间选择插件
Aug 19 Javascript
jQuery实现Tab选项卡切换效果简单演示
Nov 23 Javascript
Javascript 函数的四种调用模式
Nov 05 Javascript
javascript 中null和undefined区分和比较
Apr 19 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
Jun 16 Javascript
Nuxt配合Node在实际生产中的应用详解
Aug 07 Javascript
js canvas实现二维码和图片合成的海报
Nov 19 Javascript
利用不到200行代码写一款属于你自己的js类库
Jul 08 Javascript
node.js使用express-fileupload中间件实现文件上传
Jul 16 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
php cli 方式 在crotab中运行解决
2010/02/08 PHP
Windows下部署Apache+PHP+MySQL运行环境实战
2012/08/31 PHP
php如何调用webservice应用介绍
2012/11/24 PHP
javascript使用onclick事件改变选中行的颜色
2013/12/30 Javascript
Jquery自定义button按钮的几种方法
2014/06/11 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
2015/09/01 Javascript
基于jquery实现图片上传本地预览功能
2016/01/08 Javascript
jquery.qtip提示信息插件用法简单实例
2016/06/17 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
2016/12/02 Javascript
微信小程序中使用javascript 回调函数
2017/05/11 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
2017/09/27 Javascript
微信小程序实现图片上传功能
2018/05/28 Javascript
Vue中util的工具函数实例详解
2019/07/08 Javascript
手把手15分钟搭一个企业级脚手架
2019/09/16 Javascript
JS使用for in有序获取对象数据
2020/05/19 Javascript
如何在Vue.JS中使用图标组件
2020/08/04 Javascript
用vue设计一个日历表
2020/12/03 Vue.js
python利用有道翻译实现&quot;语言翻译器&quot;的功能实例
2017/11/14 Python
Python实现将照片变成卡通图片的方法【基于opencv】
2018/01/17 Python
基于scrapy的redis安装和配置方法
2018/06/13 Python
python组合无重复三位数的实例
2018/11/13 Python
NumPy排序的实现
2020/01/21 Python
解决Tensorflow 使用时cpu编译不支持警告的问题
2020/02/03 Python
html5 视频播放解决方案
2016/11/06 HTML / CSS
Desigual英国官网:在线购买原创服装
2018/03/09 全球购物
意大利时尚精品店:Nugnes 1920
2020/02/10 全球购物
阿拉伯时尚购物网站:Nisnass
2021/02/07 全球购物
js实现弹框效果
2021/03/24 Javascript
七年级上册语文教学计划
2015/01/22 职场文书
中国合伙人观后感
2015/06/02 职场文书
2015年小学生暑假总结
2015/07/13 职场文书
消防宣传标语大全
2015/08/03 职场文书
团结友爱主题班会
2015/08/13 职场文书
2015年物业公司保洁工作总结
2015/10/22 职场文书
python实现自定义日志的具体方法
2021/05/28 Python
Python selenium绕过webdriver监测执行javascript
2022/04/12 Python