文章目录
示例视频官方文档Picker使用多级picker多级联动代码示例hello,i’m Shendi
最近在整微信小程序，在 picker 这个地方卡了很久，这里总结一下
示例视频
小程序picker多级联动示例视频
官方文档
https://developers./miniprogram/dev/component/picker.html
Picker使用
如果只需要弹出选择一个条目，实现起来非常简单
在 wxml 文件下加入如下代码
<picker bindchange='change' value="{{index}}" range="{{array}}"><view value='{{array[index]}}'>{{array[index]}}</view></picker>
其中 bindchange 为我们点击确定后执行的函数，value为选择条目的下标，初始为0，range为选择条目的数据体
在 js 中代码如下
Page({data: {/** 条目下标 */index : 0,/** 条目数据,是一个数组 */array : ["条目1","条目2"]},/** 确定了条目所调用的函数 */change: function (e) {// 其中 e.detail.value 为选中的条目所对应的下标,这里赋值,picker将会自行更新内容this.setData({index : e.detail.value });},
多级picker
实现多级也非常简单
首先得给picker加一个mode
例如二级联动
我们传递的数组改成数组内有两个数组即可，下标也为数组
index : [0,0],array : [["条目1","条目2"],["二级条目内容1"]]
三级联动则三个数组，n级则n数组
多级联动
有时需求是一级条目有对应的二级条目…即根据上一级自动替换下一级内容（上面视频演示的效果）
我的思路是动态替换数组，将使用到 bindcolumnchange 事件
代码示例
wxml
<picker class='title_content' mode="multiSelector" bindchange='majorClassesChange' bindcolumnchange='majorCLassesColumnChange' value="{{majorClassesIndex}}" range="{{majorClasses}}"><view style="display: inline-block"><text style="color: #757575">专业班级</text><view style="margin-top: 12rpx"><text value='{{majorClasses[0][majorClassesIndex[0]]}}'>{{majorClasses[0][majorClassesIndex[0]]}}</text><text style='margin-left:12rpx;' value='{{majorClasses[1][majorClassesIndex[1]]}}'>{{majorClasses[1][majorClassesIndex[1]]}}</text></view></view></picker>
js部分
Page({data: {// 专业班级majorClassesIndex : [0,0],majorClasses: [["专业1", "专业2"], []],// 专业与班级对应表,用于动态修改classes : [{major : "专业1",classes : ["1班","2班","3班"]},{major : "专业2",classes : ["4班","5班"]}],},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var that = this;// 初始化专业班级的第一个数据var majorClasses = this.data.majorClasses;majorClasses[1] = this.data.classes[0].classes;this.setData({majorClasses : majorClasses});},/** 专业班级列切换 */majorCLassesColumnChange : function (e) {// 专业列修改则更改绑定数据的对应班级,实现联动效果if (e.detail.column == 0) {var major = this.data.majorClasses[0][e.detail.value];var classes = this.data.classes;// 这里可以自行更改,例如通过下表来获取// 循环获取指定专业对应的班级列表for (var i = 0; i < classes.length; i++) {if (classes[i].major == major) {var majorClasses = this.data.majorClasses;majorClasses[1] = classes[i].classes;var majorClassesIndex = this.data.majorClassesIndex;majorClassesIndex[0] = e.detail.value;majorClassesIndex[1] = 0;// 只能用setData修改数据this.setData({majorClasses : majorClasses,majorClassesIndex : majorClassesIndex});break;}}}},/** 用户修改了专业班级校 */majorClassesChange : function (e) {this.setData({majorClassesIndex:e.detail.value });},
