
小程序官方写的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. },
参考:微信小程序三级联动之多列选择器