项目需要,需要实现一个多列选择器,在用户确定之前,无论列表如何转,都不会影响已确定值的显示,只要用户选择确定才会把新选择的内容更新到已确定的显示值上。
目前个人思路是保存两份,一份用来存放用户选择的中间值,当用户点击确定时,把中间值更新为已确认值。如果用户选择取消,就把中间值更新为已确认值。
因为微信小程序中的多列选择器是用数组存放数据,因此在拷贝中涉及到深拷贝,必须是深拷贝才能实现上面的设想。
因此可以下面代码实现深拷贝:
var arr=JSON.parse(JSON.stringify(this.data.multiArray));
wxml:
<picker bindcancel="cancelAddr" mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{demoIndex}}" range="{{demoArray}}"> <view class="picker"> 收货地址:{{multiArray[0][multiIndex[0]]}}-{{multiArray[1][multiIndex[1]]}}-{{multiArray[2][multiIndex[2]]}} </view> </picker>
js:
data:{ multiArray: [ ['广大生活区', '广大教学区'], ['B1', 'B2', 'B3'], ['一楼', '二楼', '三楼'] ], demoArray: [ ['广大生活区', '广大教学区'], ['B1', 'B2', 'B3'], ['一楼', '二楼', '三楼'] ], //实际显示值 multiIndex: [0, 0, 0], //临时变量 demoIndex: [0, 0, 0], teach: ["文清楼", "文新楼", "文俊西楼"], life: ['B1', 'B2', 'B3'] } //修改过程中取消修改 cancelAddr() { var arr = JSON.parse(JSON.stringify(this.data.multiArray)); var index = JSON.parse(JSON.stringify(this.data.multiIndex)); this.setData({ demoArray: arr, demoIndex: index }) }, //地址选择器改变 bindMultiPickerColumnChange(e) { var value = e.detail.value; var column = e.detail.column; var demoArray = this.data.demoArray; var demoIndex = this.data.demoIndex; if (column === 0 && value != demoIndex[0]) { if (value === 0) { demoArray[1] = this.data.life; } else { demoArray[1] = this.data.teach; } } demoIndex[column] = value; this.setData({ demoArray: demoArray, demoIndex: demoIndex }) }, //确定选中的地址 bindMultiPickerChange() { console.log("all change"); var arr = JSON.parse(JSON.stringify(this.data.demoArray)); var index = JSON.parse(JSON.stringify(this.data.demoIndex)); this.setData({ multiArray: arr, multiIndex: index }) },
效果图(上面代码的数据数量删除了部分):