微信小程序picker组件中多列选择器的使用

小程序官方写的picker组件的文档看不懂,只能百度上搜搜;

**wxml:**

1. <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{index}}" range="{{label}}">
2.     <view class="picker">
3.         <input disabled name="label_id" placeholder='请选择您发布内容的标签' value='{{label[0][index[0]]}},{{label[1][index[1]]}}'></input>
4.     </view>
5. </picker>

**js:**

1. bindMultiPickerChange: function (e) {
2.     let that = this;
3.     console.log('picker发送选择改变,携带值为', e.detail.value)  // 得到两级列表的索引值 类型为数组
4.
5.     this.setData({
6.       index: e.detail.value,
7.     })
8.   },
9.   bindMultiPickerColumnChange: function (e) {
10.     // console.log('修改的列为', e.detail.column, ',值为', e.detail.value);
11.     let that = this;
12.     let column = e.detail.column // 第一栏索引值
13.     let val = e.detail.value; // 第二栏索引值
14.     let ssls = that.data.labelList; // 所有数据
15.
16.     //定义对应变量
17.     var sheng = that.data.label[0]; // 一级列表
18.     var shi = []; // 二级列表
19.     switch (column) {
20.       case 0:
21.         //此处是拖动第一栏的时候处理
22.         for (var u in ssls[val].childList) {
23.           shi.push(ssls[val].childList[u].labelName)
24.         }
25.         that.setData({
26.           label: [sheng, shi],
27.           index: [val, 0] // 初始化二级列表回第一项
28.         });
29.         break;
30.       case 1:
31.         //此处是拖动第二栏的时候处理
32.         break;
33.     }
34.
35.   },

参考:微信小程序三级联动之多列选择器