您现在的位置是:网站首页> 编程资料编程资料

微信小程序自定义多列选择器使用_javascript技巧_

2023-05-24 283人已围观

简介 微信小程序自定义多列选择器使用_javascript技巧_

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

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

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

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

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

wxml:

                              收货地址:{{multiArray[0][multiIndex[0]]}}-{{multiArray[1][multiIndex[1]]}}-{{multiArray[2][multiIndex[2]]}}                      

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

效果图(上面代码的数据数量删除了部分):

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

-六神源码网