本文实例为大家分享了微信小程序自定义多列选择器的具体代码,供大家参考,具体内容如下 项目需要,需要实现一个多列选择器,在用户确定之前,无论列表如何转,都不会影响已确定值的显示,只要用
本文实例为大家分享了微信小程序自定义多列选择器的具体代码,供大家参考,具体内容如下
项目需要,需要实现一个多列选择器,在用户确定之前,无论列表如何转,都不会影响已确定值的显示,只要用户选择确定才会把新选择的内容更新到已确定的显示值上。
目前个人思路是保存两份,一份用来存放用户选择的中间值,当用户点击确定时,把中间值更新为已确认值。如果用户选择取消,就把中间值更新为已确认值。
因为微信小程序中的多列选择器是用数组存放数据,因此在拷贝中涉及到深拷贝,必须是深拷贝才能实现上面的设想。
因此可以下面代码实现深拷贝:
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
})
},
效果图(上面代码的数据数量删除了部分):
--结束END--
本文标题: 微信小程序自定义多列选择器使用
本文链接: https://lsjlt.com/news/154060.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0