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 相关文章推荐
js用图作提交按钮或超连接
Mar 26 Javascript
Javascript学习笔记5 类和对象
Jan 11 Javascript
php图像生成函数之间的区别分析
Dec 06 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
Jun 24 Javascript
jQuery插件开发的五种形态小结
Mar 04 Javascript
leaflet的开发入门教程
Nov 17 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
值得收藏的八个常用的js正则表达式
Oct 19 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
Oct 25 Javascript
js模拟F11页面全屏显示
Sep 17 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
Sep 21 Javascript
Html5生成验证码的示例代码
May 10 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
全国FM电台频率大全 - 23 四川省
2020/03/11 无线电
php提示无法加载或mcrypt没有找到 PHP 扩展 mbstring解决办法
2012/03/27 PHP
PHP制作百度词典查词采集器
2015/01/29 PHP
php中namespace及use用法分析
2016/12/06 PHP
PHP使用JpGraph绘制折线图操作示例【附源码下载】
2019/10/18 PHP
一个不错的应用,用于提交获取文章内容,不推荐用
2007/03/03 Javascript
JavaScript面象对象设计
2008/04/28 Javascript
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
2010/02/07 Javascript
javascript错误的认识不用关心内存管理
2012/12/15 Javascript
js 获取浏览器版本以此来调整CSS的样式
2014/06/03 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
2016/01/22 Javascript
JavaScript  event对象整理及详细介绍
2016/10/10 Javascript
Bootstrap Img 图片样式(推荐)
2016/12/13 Javascript
JavaScript实现星级评分
2017/01/12 Javascript
JavaScript引用类型Object常见用法实例分析
2018/08/08 Javascript
setTimeout与setInterval的区别浅析
2019/03/23 Javascript
小程序如何获取多个formId实现详解
2019/09/20 Javascript
[03:38]2014DOTA2西雅图国际邀请赛 VG战队巡礼
2014/07/07 DOTA
[51:17]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
[50:38]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第二场 3月7日
2021/03/11 DOTA
使用Python操作MySQL的一些基本方法
2015/08/16 Python
python:socket传输大文件示例
2017/01/18 Python
深入理解python中sort()与sorted()的区别
2018/08/29 Python
Django model update的多种用法介绍
2020/03/28 Python
python实现对图片进行旋转,放缩,裁剪的功能
2019/08/07 Python
Python字符串格式化常用手段及注意事项
2020/06/17 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
python 爬取百度文库并下载(免费文章限定)
2020/12/04 Python
纯CSS实现菜单、导航栏的3D翻转动画效果
2014/04/23 HTML / CSS
米兰网婚纱礼服法国网上商店:Milanoo法国
2016/08/20 全球购物
上海天奕面试题笔试题
2015/04/19 面试题
写自荐信的注意事项
2014/03/09 职场文书
酒店周年庆活动方案
2014/08/21 职场文书
企业财务总监岗位职责
2015/04/03 职场文书
2016年会开场白台词
2015/06/01 职场文书
一文了解MySQL二级索引的查询过程
2022/02/24 MySQL