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实现可改变列宽的table实例
Jul 02 Javascript
jQuery解析XML文件同时动态增加js文件的方法
Jun 01 Javascript
JavaScript中的toUTCString()方法使用详解
Jun 12 Javascript
jQuery增加与删除table列的方法
Mar 01 Javascript
JavaScript 是什么意思
Sep 22 Javascript
纯js三维数组实现三级联动效果
Feb 07 Javascript
Vue插件写、用详解(附demo)
Mar 20 Javascript
JavaScript实现无刷新上传预览图片功能
Aug 02 Javascript
vue 中directive功能的简单实现
Jan 05 Javascript
详解vue移动端日期选择组件
Feb 22 Javascript
Vue之mixin全局的用法详解
Aug 22 Javascript
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
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+ajax 无刷新删除数据
2010/02/20 PHP
destoon设置自定义搜索的方法
2014/06/21 PHP
php preg_match的匹配不同国家语言实例
2016/12/29 PHP
php修改数组键名的方法示例
2017/04/15 PHP
php中的钩子理解及应用实例分析
2019/08/30 PHP
Laravel框架表单验证操作实例分析
2019/09/30 PHP
定义JavaScript二维数组采用定义数组的数组来实现
2012/12/09 Javascript
jQuery响应enter键的实现思路
2014/04/18 Javascript
原生JavaScript实现合并多个数组示例
2014/09/21 Javascript
jquery实现简单的无缝滚动
2015/04/15 Javascript
Javascript中的getUTCHours()方法使用详解
2015/06/10 Javascript
jQuery使用deferreds串行多个ajax请求
2016/08/22 Javascript
JSON与String互转的实现方法(Javascript)
2016/09/27 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
2016/11/07 Javascript
Vue常用指令V-model用法
2017/03/08 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
2019/07/04 Javascript
[03:56]还原FTP电影首映式 DOTA2群星拼出遗迹世界
2014/03/26 DOTA
Python实现简单截取中文字符串的方法
2015/06/15 Python
详解设计模式中的工厂方法模式在Python程序中的运用
2016/03/02 Python
Python深入06——python的内存管理详解
2016/12/07 Python
解决pandas 作图无法显示中文的问题
2018/05/24 Python
python Web开发你要理解的WSGI &amp; uwsgi详解
2018/08/01 Python
python for循环输入一个矩阵的实例
2018/11/14 Python
python使用PyQt5的简单方法
2019/02/27 Python
Python HTML解析模块HTMLParser用法分析【爬虫工具】
2019/04/05 Python
使用Python轻松完成垃圾分类(基于图像识别)
2019/07/09 Python
python opencv对图像进行旋转且不裁剪图片的实现方法
2019/07/09 Python
ellesse美国官方商店:意大利高级运动服品牌
2019/10/29 全球购物
文字自荐书范文
2014/02/10 职场文书
各营销点岗位职责范本
2014/03/05 职场文书
1亿有多大教学反思
2014/05/01 职场文书
机械设备与数控技术专业求职信
2014/08/10 职场文书
2015年秋季开学典礼校长致辞
2015/07/16 职场文书
2016春季运动会开幕词
2016/03/04 职场文书
MySQL5.7并行复制原理及实现
2021/06/03 MySQL
详解Vue router路由
2021/11/20 Vue.js