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 相关文章推荐
firefox下对ajax的onreadystatechange的支持情况分析
Dec 14 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
May 11 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
Aug 22 Javascript
jquery+html5烂漫爱心表白动画代码分享
Aug 24 Javascript
JS 全屏和退出全屏详解及实例代码
Nov 07 Javascript
jquery表单提交带错误信息提示效果
Mar 09 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
May 23 Javascript
JavaScript定时器设置、使用与倒计时案例详解
Jul 08 Javascript
关于layui的动态图标不显示的解决方法
Sep 04 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
Oct 16 Javascript
vue中使用rem布局代码详解
Oct 30 Javascript
详解javascript中var与ES6规范中let、const区别与用法
Jan 11 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 使用pcntl和libevent 实现Timer功能
2013/10/27 PHP
在PHP模板引擎smarty生成随机数的方法和math函数详解
2014/04/24 PHP
ThinkPHP3.1新特性之对Ajax的支持更加完善
2014/06/19 PHP
使用PHP编写发红包程序
2015/07/22 PHP
ubuntu下配置nginx+php+mysql详解
2015/09/10 PHP
TNC vs BOOM BO3 第三场2.13
2021/03/10 DOTA
Javascript实现的分页函数
2006/12/22 Javascript
收藏Javascript中常用的55个经典技巧
2007/08/12 Javascript
js 模拟实现类似c#下的hashtable的简单功能代码
2010/01/24 Javascript
从零学jquery之如何使用回调函数
2014/05/16 Javascript
Js实现滚动变色的文字效果
2014/06/16 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
2014/07/10 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
2016/08/20 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
2016/11/23 Javascript
Vue中props的使用详解
2018/06/15 Javascript
vue.js 实现输入框动态添加功能
2018/06/25 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
2019/09/20 Javascript
微信小程序canvas开发水果老虎机的思路详解
2020/02/07 Javascript
[47:53]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#2COL VS Spirit
2016/03/02 DOTA
对于Python异常处理慎用“except:pass”建议
2015/04/02 Python
python自动登录12306并自动点击验证码完成登录的实现源代码
2018/04/25 Python
python绘制立方体的方法
2018/07/02 Python
浅谈python之新式类
2018/08/12 Python
python与字符编码问题
2019/05/24 Python
python 批量解压压缩文件的实例代码
2019/06/27 Python
pandas DataFrame运算的实现
2020/06/14 Python
python利用platform模块获取系统信息
2020/10/09 Python
css3新增颜色表示方式分享
2014/04/15 HTML / CSS
css3新单位vw、vh的使用教程
2018/03/23 HTML / CSS
Vince官网:全球著名设计师品牌,休闲而优雅的服饰
2017/01/15 全球购物
英国假发网站:Hothair
2018/02/23 全球购物
求职意向书
2014/04/01 职场文书
团拜会策划方案
2014/06/07 职场文书
建设工程授权委托书
2014/09/22 职场文书
解决Golang中ResponseWriter的一个坑
2021/04/27 Golang
swagger如何返回map字段注释
2021/07/03 Java/Android