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调试logger组件实现代码
Nov 20 Javascript
侧栏跟随滚动的简单实现代码
Mar 18 Javascript
JS Canvas定时器模拟动态加载动画
Sep 17 Javascript
javascript this详细介绍
Sep 19 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
Jan 21 Javascript
bootstrap中添加额外的图标实例代码
Feb 15 Javascript
jQuery EasyUI Draggable拖动组件
Mar 01 Javascript
使用jQuery卸载全部事件的思路详解
Apr 03 jQuery
使用ionic播放轮询广告的实现方法(必看)
Apr 24 Javascript
NW.js 简介与使用方法
Feb 01 Javascript
Angular学习教程之RouterLink花式跳转
May 03 Javascript
openlayers实现地图测距测面
Sep 25 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
使用GROUP BY的时候如何统计记录条数 COUNT(*) DISTINCT
2011/04/23 PHP
遭遇php的in_array低性能问题
2013/09/17 PHP
PHP 读取和编写 XML
2014/11/19 PHP
如何在HTML 中嵌入 PHP 代码
2015/05/13 PHP
PHP上传图片时判断上传文件是否为可用图片的方法
2016/10/20 PHP
ThinkPHP框架实现的微信支付接口开发完整示例
2019/04/10 PHP
让textarea控件的滚动条怎是位与最下方
2007/04/20 Javascript
Javascript 页面模板化很多人没有使用过的方法
2012/06/05 Javascript
js二维数组排序的简单示例代码
2014/01/24 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
2014/05/23 Javascript
仿百度联盟对联广告实现代码
2014/08/30 Javascript
AngularJS实现在ng-Options加上index的解决方法
2016/11/03 Javascript
vue父子组件的数据传递示例
2017/03/07 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
2017/07/14 Javascript
JS+H5 Canvas实现时钟效果
2018/07/20 Javascript
深入分析element ScrollBar滚动组件源码
2019/01/22 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
2019/09/03 Javascript
Vuex中实现数据状态查询与更改
2019/11/08 Javascript
d3.js实现图形缩放平移
2019/12/19 Javascript
详解JavaScript 中的批处理和缓存
2020/11/19 Javascript
python爬虫入门教程--利用requests构建知乎API(三)
2017/05/25 Python
名片管理系统python版
2018/01/11 Python
Python使用正则表达式获取网页中所需要的信息
2018/01/29 Python
Python自定义函数计算给定日期是该年第几天的方法示例
2019/05/30 Python
python 怎样将dataframe中的字符串日期转化为日期的方法
2019/09/26 Python
浅谈Python type的使用
2019/11/19 Python
Django使用rest_framework写出API
2020/05/21 Python
Python logging日志模块 配置文件方式
2020/07/12 Python
八一慰问活动方案
2014/02/07 职场文书
双拥工作宣传标语
2014/06/26 职场文书
乡镇消防安全责任书
2014/07/23 职场文书
2015年园林绿化工作总结
2015/05/23 职场文书
行为习惯主题班会
2015/08/14 职场文书
《蟋蟀的住宅》教学反思
2016/02/17 职场文书
Tomcat starup.bat 脚本实现开机自启动
2022/04/20 Servers
MySQL中order by的执行过程
2022/06/05 MySQL