微信小程序实现三级联动

该三级联动是借助于vant-weapp组件库中的vant-picker多级联动实现的

我们先看一下效果图

我们都知道官方对vant-picker多级联动组件的介绍并不多，而且还会让初学者看的绞尽脑汁，这个是干什么的啊，这是啥啊，会有很多个疑问，官方组件介绍点击直达

如果你还没有用过vant-weapp组件库，请先对该组件库进行一些初步的了解，这是一个很利于大家快速开发微信小程序的一个组件库，笔者大力推荐大家使用。

vant-weapp组件库官方使用文档点击直达
如果你还不知道怎么引用vant-weapp组件库请看我的博客点击直达

下面就贴一下我实现的具体代码

index.wxml代码

<van-picker
show-toolbar
columns='{{columns}}'
value-key='name'
bind:change='onChange'
bind:confirm='onConfirm'
bind:cancel='onCancel'/>

index.json代码

"usingComponents": {"van-picker": "/miniprogram_npm/vant-weapp/picker/index"}

index.js代码

var one = [{ id: 111, 'name': '杭州' },{ id: 222, 'name': '宁波' },
]
var two = {'杭州': [{ id: 11100, 'name': '国杭州' },{ id: 22201, 'name': '国宁波' },],'宁波': [{ id: 11102, 'name': '中杭州' },{ id: 22203, 'name': '中宁波' },{ id: 33304, 'name': '中温州' },]
}
var three = {'国杭州': [{ id: 1110000, 'name': 'aaa' },{ id: 2220101, 'name': 'bbb' },],'国宁波': [{ id: 1110102, 'name': 'ccc' },{ id: 2220103, 'name': 'ddd' },{ id: 3330104, 'name': 'eee' },],'中杭州': [{ id: 1110205, 'name': 'fff' },{ id: 2220206, 'name': 'ggg' },{ id: 3330207, 'name': 'hhh' },],'中宁波': [{ id: 1110308, 'name': 'www' },{ id: 2220309, 'name': 'ttt' },{ id: 3330310, 'name': 'yyy' },],'中温州': [{ id: 1110411, 'name': 'jjj' },{ id: 2220412, 'name': 'kkk' },{ id: 3330413, 'name': 'ppp' },]
}Page({data: {columns: [{values: one,                              //可以是数组，或者对象数组className: 'column1'                      //选择器的第一列},{values: two[one[0].name],                 //默认选中two对象中的第一项className: 'column2',                     //选择器的第二列},{values: three[two[one[0].name][0].name],  //默认选中three对象中的第一项className: 'column3',                     //选择器的第三列}]},onLoad() {},onConfirm(event) {let value = event.detail.value//将选中的文字和对应的id拿出来使用wx.showModal({title: '',content: '您选中了“' + value[0].name + ',' + value[1].name + ',' + value[2].name + '”, di为“'+ value[0].id + ',' + value[1].id + ',' + value[2].id + '”',showCancel: false})},onChange(event) {let picker = event.detail.pickerlet value = event.detail.valuelet index = event.detail.index//在change 第一列的时候，动态更改第二列的数据//setColumnValues是vant自带的实例方法//第一个参数是列数，从0开始；第二个参数是第二列应该显示的数据picker.setColumnValues(1, two[value[0].name])//此处vant-picker有一个bug，当只滑动第一级时，返回的value数据是错误的，需要我们自己根据第二 级计算，去获取第三级数据if (index == 0) {picker.setColumnValues(2, three[(two[value[0].name][0]).name])} else {picker.setColumnValues(2, three[value[1].name])}},onCancel() {}
})

以上就是实现功能的全部代码，需要特别注意的就是官方的onChange方法，返回的第二列数据是有问题的，这里需要我们单独处理下，bug如下

我们可以看到，当我们只操作第一列的时候，显然返回的value只有第一列是正确的，其他两列都是错误的，但是这种错误只在change事件出现，在confirm事件并没有这种情况，但是这明显也是也bug，会造成数据不统一问题，废话不多说直接说解决方案。

解决方案：

首先，我们可以清晰的看到，我们是可以获取到用户操作的那一列的下标的，0：第一列，1：第二列，2：第三列，依次类推，那么我们就可以通过下标判断，如果是第一列也就是index是0的情况，说明只滑动了第一列，我们就使用第二列的第一个对象数组key，否则就按照change方法返回的对象数组key，代码展示如下:

onChange(event) {let picker = event.detail.pickerlet value = event.detail.valuelet index = event.detail.index//在change 第一列的时候，动态更改第二列的数据//setColumnValues是vant自带的实例方法//第一个参数是列数，从0开始；第二个参数是第二列应该显示的数据picker.setColumnValues(1, two[value[0].name])//此处vant-picker有一个bug，当只滑动第一级时，返回的value数据是错误的，需要我们自己根据第二 级计算，去获取第三级数据if (index == 0) {picker.setColumnValues(2, three[(two[value[0].name][0]).name])} else {picker.setColumnValues(2, three[value[1].name])}},

本文是前端静态实现，如果你想结合后端实现三级联动，请查看我的这篇文章点击传送

参考：https://www.jianshu.com/p/3886f1eded67

微信小程序实现三级联动相关推荐

微信小程序的省市区三级地址mysql_微信小程序实现三级联动-省市区
序:项目中需要用到三级联动,自己试着写了下,也查了一些资料,现在把这个记录一下,里面地区数据,可根据个人需要做一些更改,我比较懒就不改了. wxml {{province}} {{city}} {{c ...
app uni 三级联动地址_uni-app 微信小程序 picker 三级联动
之前做过一个picker的三级联动功能,这里分享代码给大家具体代码: // An highlighted block {{ areaname }} {{ buildingname }} {{ flo ...
NO--14 微信小程序，左右联动二
上一篇讲解了左=>右联动,那个还比较简单,本篇写剩下比较核心的部分,也是本次开发过程中遇到最难的部分,右=>左联动,先简单看一下演示右左联动.gif 一.关键技术: (1) 小程序 wx ...
记录-微信小程序picker多级联动级别不固定-又是令人头冷的一天
先贴上需求,后台返回的值结构中既有2级.也有3级和4级的children,要求联动效果 options: [{id: 10,name: "北京",list: [{id: 11,na ...
微信小程序省市区三级地址选择实现
国际惯例上效果图: 省市区三级联动,选择省自动刷新市,选择市自动刷新区,点击取消自动返回上一级重新选择,点击确定,保存地址. 数据库这份数据库是某天在网上逛到的,当时未记录出处,直接贴出给读者使用 ...
支付宝小程序省市区三级联动
背景最近做的项目有省市区联动.不仅要传name还要把对应的id发给后台. 支付宝提供的级联有 my.multiLevelSelect 和picker并不能满足需求. picker 组件不支持多列选 ...
微信小程序之二级联动下拉列表
<view class="section"><view class="section__title">多列选择器</view> ...
小程序picker三级联动
直接上代码 WXML <picker name="create_id" mode="multiSelector" bindchange="bin ...
【微信小程序】各种页面特殊效果合集第二期
第一期地址:微信小程序特殊效果合集第一期自动完成文本框:微信小程序之自动完成文本框搜索关键词高亮:做搜索关键字高亮,大家有什么思路? 相册效果:精致点选下拉框,附带相册,附带网络访问,细节至上! ...

微信小程序实现三级联动

微信小程序实现三级联动相关推荐

最新文章

热门文章