微信小程序自定義多列選擇器使用

更新時間：2022年07月11日 10:22:46 作者：赫蘿的紅蘋果

這篇文章主要為大家詳細介紹了微信小程序自定義多列選擇器使用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序自定義多列選擇器的具體代碼，供大家參考，具體內(nèi)容如下

項目需要，需要實現(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ù)量刪除了部分）：