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

第微信小程序自定义多列选择器使用本文实例为大家分享了微信小程序自定义多列选择器的具体代码，供大家参考，具体内容如下

项目需要，需要实现一个多列选择器，在用户确定之前，无论列表如何转，都不会影响已确定值的显示，只要用户选择确定才会把新选择的内容更新到已确定的显示值上。

目前个人思路是保存两份，一份用来存放用户选择的中间值，当用户点击确定时，把中间值更新为已确认值。如果用户选择取消，就把中间值更新为已确认值。

因为微信小程序中的多列选择器是用数组存放数据，因此在拷贝中涉及到深拷贝，必须是深拷贝才能实现上面的设想。

因此可以下面代码实现深拷贝：

vararr=JSON.parse(JSON.stringify(this.data.multiArray));

wxml:

pickerbindcancel="cancelAddr"mode="multiSelector"bindchange="bindMultiPickerChange"bindcolumnchange="bindMultiPickerColumnChange"value="{{demoIndex}}"range="{{demoArray}}"

view

收货地址:{{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(){

vararr=JSON.parse(JSON.stringify(this.data.multiArray));

varindex=JSON.parse(JSON.stringify(this.data.multiIndex));

this.setData({

demoArray:arr,

demoIndex:index

})

//地址选择器改变

bindMultiPickerColumnChange(e){

varvalue=e.detail.value;

varcolumn=e.detail.column;

vardemoArray=this.data.demoArray;

vardemoIndex=this.data.demoIndex;

if(column===0value!=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("allchange");

vararr=JSON.parse(JSON.stringify(this.data.demoArray));

varindex=JSON.parse(JSON.stringify(this.data.demoIndex));

this.setData({

multiArray:arr,