vant IndexBar实现的城市列表的示例代码

2024-04-07 09:30:48

在开发中有个需求是一个选择城市的列表，看了看做成三级联动好像不是特别方便还是做成一整页可以按导航选取的就可以了

话不多说开始上码

我用的是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的基础上实现添加表单验证框架的方法示例

Vant 一套基于Vue的移动端UI框架,有赞出品. 因为UI设计的够漂亮,源码结构也比较清晰,插件定位也比较明确,重要是实战过程中的使用体验不错.在最近的项目当中就使用 Vant 作为移动端的基础UI框架,但在实践过程中发现该框架和其他框架有不一样的地方.例如它不内置表单验证,接下来,我把自己实现验证框架的思路分享出来. 分析需求我们找的插件主要能解决以下问题支持中文适应UI框架分组验证动态验证(数据动态,规则动态) 去网络上搜索了一些框架,推荐两款(在官方也有推https://cn
Vant的安装和配合引入Vue.js项目里的方法步骤

1.安装vant npm i vant -S:这是简写形式. npm install vant --save:这是完整写法. 如果你网络很慢的话,可以使用淘宝的源,但是不建议使用cnpm来进行安装. npm install vant --save --registry=https://registry.npm.taobao.org 淘宝镜像,速度快,安装后查看package.json文件里看是否安装完成 2.1使用babel-plugin-import(推荐) babel-plugin-impo
详解mpvue中使用vant时需要注意的onChange事件的坑

最近用了一下Vant Weapp组件库,但是由于我是用mpvue写的,所以自然跟小程序引用不一样,比如我最近引用了vant里面的collapse折叠面板,官网文档里面介绍的使用方法是这样的 1.在 app.json 或 index.json 中引入组件 "usingComponents": { "van-collapse": "path/to/vant-weapp/dist/collapse/index", "van-collapse-
Vue 用Vant实现时间选择器的示例代码

1.查看Vant官网https://youzan.github.io/vant/#/zh-CN/datetime-picker 引入Vant中DatetimePicker组件(全局引入后可直接使用) import Vue from 'vue'; import { DatetimePicker } from 'vant' Vue.use(DatetimePicker); 关键使用代码(结合vant组件Popup的底部弹出层一起使用) <van-popup v-model="dateShow&
vue vantUI实现文件（图片、文档、视频、音频）上传（多文件）

说在前面网上有很多种文件上传的方法,根据公司最近的业务需求,要求实现多种文件的上传,在实现过程中,查阅了很多资料,最后,终于把功能实现了,开心! <template> <div> <v-header :left-text="`上传${columnName}`"></v-header> <div class="upload"> <div v-if="columnName === '视频'&q
mpvue+vant app搭建微信小程序的方法步骤

mpvue使用 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 mpvue-quickstart 模板的新项目 $ vue init mpvue/mpvue-quickstart my-project # 安装依赖 $ cd my-project $ npm install # 启动构建 $ npm run dev vant使用 yarn add vant # 将node_modules下的vant-weapp下的dist目录复制到s
详解VUE项目中安装和使用vant组件

Vant 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件. 特性 50+ 个经过有赞线上业务检验的组件单元测试覆盖率超过 90% 完善的中英文文档和示例支持babel-plugin-import 支持 TypeScript 支持 SSR 组件中文文档地址:https://youzan.github.io/vant/#/zh-CN/intro 1.创建VUE项目之后进入项目目录运行安装命令: npm i vant -S 2.安装 babel-pl
详解vantUI框架在vue项目中的应用踩坑

1.订单提交地址等组件的应用. 使用的组件有如下: import {Card,button,Toast,AddressList,Popup,AddressEdit,Area} from 'vant' 主要是配货地址编辑这块: <van-address-edit :area-list="areaList" :address-info="addressInfo" show-postal show-delete show-set-default show-searc
Mpvue中使用Vant Weapp组件库的方法步骤

一.介绍 mpvue-vant记录了我们团队开发中在mpvue中使用Vant Weapp组件库所踩下的坑,在这里分享给大家,让mpvue开发者可以使用vant组件库进行开发,避免踩不必要的坑. 此教程是在dov-yih一同协助下完成.经过测试,Vant Weapp下所有组件都能够在mpvue中使用 mpvue-vant Github地址二.使用方法目前vant已经支持了npm的方式,但是由于node_modules目录下的代码是不会被编进dist目录下的,所以暂时只能用git方式使用. 克隆
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能

面向百度开发 html <van-uploader :after-read="onRead" accept="image/*"> <img src="./icon_input_add.png" /> </van-uploader> js data() { return { files: { name: "", type: "" }, headerImage: null,

vant IndexBar实现的城市列表的示例代码

相关推荐

随机推荐