微信小程序如何实现自定义多列选择器的长尾词？

本文共计773个文字，预计阅读时间需要4分钟。

原文示例：本文字例为大数据分享了微信小程序自定义多列选择器的具体代码，供大家参考。项目需要，需要实现一个多列选择器，在使用者确定之前，无论列表如何转换，都不会影响已确定的选项。

改写后：示例代码展示了如何在大数据分享中创建微信小程序的自定义多列选择器，可供参考。项目需求是开发一个多列选择器，在用户确定选择前，无论列表如何变化，都不会影响已选定的选项。

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

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

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

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

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     })   },

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。