微信小程序?qū)崿F(xiàn)自定義多列選擇器使用

3403771864 發(fā)布于2022-11-10 22:23 / 551人閱讀

　　在項目搭建過程中吃，需要實現(xiàn)一個多列選擇器，在用戶確定之前，無論列表如何轉(zhuǎn)，對于已選擇的都不會有影響，只有在確定選擇內(nèi)容后才顯示值上。

　　思路：保存兩份，一份用來存放用戶選擇的中間值，當用戶點擊確定時，把中間值更新為已確認值。如果用戶選擇取消，就把中間值更新為已確認值。

　　因為微信小程序中的多列選擇器是用數(shù)組存放數(shù)據(jù)，因此在拷貝中涉及到深拷貝，必須是深拷貝才能實現(xiàn)上面的設(shè)想。

　　因此可以下面代碼實現(xiàn)深拷貝：

　　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: [
　　['廣大生活區(qū)', '廣大教學區(qū)'],
　　['B1', 'B2', 'B3'],
　　['一樓', '二樓', '三樓']
　　],
　　demoArray: [
　　['廣大生活區(qū)', '廣大教學區(qū)'],
　　['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
　　})
　　},

　　效果圖（上面代碼的數(shù)據(jù)數(shù)量刪除了部分）：