微信小程序如何自定義多列選擇器

今天小編給大家分享一下微信小程序如何自定義多列選擇器的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

項目需要，需要實現一個多列選擇器，在用戶確定之前，無論列表如何轉，都不會影響已確定值的顯示，只要用戶選擇確定才會把新選擇的內容更新到已確定的顯示值上。

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

因為微信小程序中的多列選擇器是用數組存放數據，因此在拷貝中涉及到深拷貝，必須是深拷貝才能實現上面的設想。
因此可以下面代碼實現深拷貝：

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

效果圖（上面代碼的數據數量刪除了部分）：

以上就是“微信小程序如何自定義多列選擇器”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。