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 相关文章推荐
比较详细的关于javascript中void(0)的具体含义解释
Aug 02 Javascript
防止动态加载JavaScript引起的内存泄漏问题
Oct 08 Javascript
jquery中animate动画积累的解决方法
Oct 05 Javascript
JavaScript window.location对象
Nov 14 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
Dec 07 Javascript
js仿微博动态栏功能
Feb 22 Javascript
详解angularjs利用ui-route异步加载组件
May 21 Javascript
帝国cms首页列表页实现点赞功能
Oct 30 Javascript
微信小程序的mpvue框架快速上手指南
May 15 Javascript
你或许不知道的一些npm实用技巧
Jul 04 Javascript
JS 自执行函数原理及用法
Aug 05 Javascript
vue style width a href动态拼接问题的解决
Aug 07 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实现的生成静态HTML速度快类库
2007/03/31 PHP
php自动适应范围的分页代码
2008/08/05 PHP
PHP实时显示输出
2008/10/02 PHP
php使用类继承解决代码重复的问题
2015/02/11 PHP
PHP读取word文档的方法分析【基于COM组件】
2017/08/01 PHP
JavaScript 事件属性绑定带参数的函数
2009/03/13 Javascript
响应鼠标变换表格背景或者颜色的代码
2009/03/30 Javascript
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
客户端 使用XML DOM加载json数据的方法
2010/09/28 Javascript
JavaScript中的this关键字介绍与使用实例
2013/06/21 Javascript
AngularJS辅助库browserTrigger用法示例
2016/11/03 Javascript
浅谈Angular.js中使用$watch监听模型变化
2017/01/10 Javascript
BootStrap CSS全局样式和表格样式源码解析
2017/01/20 Javascript
angularjs select 赋值 ng-options配置方法
2018/02/28 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
2019/02/13 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
2020/01/05 Javascript
详解webpack的clean-webpack-plugin插件报错
2020/10/16 Javascript
[01:15:12]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#4Newbee VS CDEC
2016/03/03 DOTA
Python 列表list使用介绍
2014/11/30 Python
python操作mongodb根据_id查询数据的实现方法
2015/05/20 Python
Python中模块pymysql查询结果后如何获取字段列表
2017/06/05 Python
Python实现希尔排序算法的原理与用法实例分析
2017/11/23 Python
在Python中通过getattr获取对象引用的方法
2019/01/21 Python
使用Rasterio读取栅格数据的实例讲解
2019/11/26 Python
Python使用pymysql模块操作mysql增删改查实例分析
2019/12/19 Python
Django choices下拉列表绑定实例
2020/03/13 Python
css3实现平移效果(transfrom:translate)的示例
2020/11/13 HTML / CSS
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
加拿大的标志性百货公司:Hudson’s Bay(哈得逊湾)
2019/09/03 全球购物
平安建设实施方案
2014/03/19 职场文书
2014年精神文明工作总结
2014/12/23 职场文书
单方投资意向书
2015/05/11 职场文书
2015年幼儿园教育教学工作总结
2015/05/25 职场文书
党内外群众意见范文
2015/06/02 职场文书
2015年学校教研室主任工作总结
2015/07/20 职场文书
Nginx反向代理、重定向
2022/04/13 Servers