微信小程序自定义多列选择器使用

本文实例为大家分享了微信小程序自定义多列选择器的具体代码，供大家参考，具体内容如下
项目需要，需要实现一个多列选择器，在用户确定之前，无论列表如何转，都不会影响已确定值的显示，只要用户选择确定才会把新选择的内容更新到已确定的显示值上。
目前个人思路是保存两份，一份用来存放用户选择的中间值，当用户点击确定时，把中间值更新为已确认值。如果用户选择取消，就把中间值更新为已确认值。
因为微信小程序中的多列选择器是用数组存放数据，因此在拷贝中涉及到深拷贝，必须是深拷贝才能实现上面的设想。
因此可以下面代码实现深拷贝：

1. var arr=JSON.parse(JSON.stringify(this.data.multiArray));

复制代码

wxml:

1. <picker bindcancel="cancelAddr" mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{demoIndex}}" range="{{demoArray}}">
2.       <view class="picker">
3.         收货地址:{{multiArray[0][multiIndex[0]]}}-{{multiArray[1][multiIndex[1]]}}-{{multiArray[2][multiIndex[2]]}}
4.       </view>
5.     </picker>

复制代码

js:

1. data:{
2. multiArray: [
3.    ['广大生活区', '广大教学区'],
4.    ['B1', 'B2', 'B3'],
5.    ['一楼', '二楼', '三楼']
6.   ],
7.   demoArray: [
8.    ['广大生活区', '广大教学区'],
9.    ['B1', 'B2', 'B3'],
10.    ['一楼', '二楼', '三楼']
11.   ],
12.   //实际显示值
13.   multiIndex: [0, 0, 0],
14.   //临时变量
15.   demoIndex: [0, 0, 0],
16.   teach: ["文清楼", "文新楼", "文俊西楼"],
17.   life: ['B1', 'B2', 'B3']
18.   }
20. //修改过程中取消修改
21. cancelAddr() {
22.   var arr = JSON.parse(JSON.stringify(this.data.multiArray));
23.   var index = JSON.parse(JSON.stringify(this.data.multiIndex));
24.   this.setData({
25.    demoArray: arr,
26.    demoIndex: index
27.   })
28. },
29. //地址选择器改变
30. bindMultiPickerColumnChange(e) {
31.   var value = e.detail.value;
32.   var column = e.detail.column;
33.   var demoArray = this.data.demoArray;
34.   var demoIndex = this.data.demoIndex;
35.   if (column === 0 && value != demoIndex[0]) {
36.    if (value === 0) {
37.     demoArray[1] = this.data.life;
38.    } else {
39.     demoArray[1] = this.data.teach;
40.    }
41.   }
42.   demoIndex[column] = value;
43.   this.setData({
44.    demoArray: demoArray,
45.    demoIndex: demoIndex
46.   })
47. },
48. //确定选中的地址
49. bindMultiPickerChange() {
50.   console.log("all change");
51.   var arr = JSON.parse(JSON.stringify(this.data.demoArray));
52.   var index = JSON.parse(JSON.stringify(this.data.demoIndex));
53.   this.setData({
54.    multiArray: arr,
55.    multiIndex: index
56.   })
57. },

复制代码

效果图（上面代码的数据数量删除了部分）：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中国红客联盟。

顶

顶！