小程式 三級地址聯動

劉清朗發表於2018-06-25

小程式 三級地址聯動

說到小程式的地址聯動，首先說說小程式組建 picker

從底部彈起的滾動選擇器，現支援五種選擇器，通過mode來區分，分別是普通選擇器，多列選擇器，時間選擇器，日期選擇器，省市區選擇器，預設是普通選擇器。官方文件地址

------------------------------------分割線

三級聯動 採用 多列選擇器: multiSelector

<picker mode="multiSelector" 
bindchange="bindMultiPickerChange"
bindcolumnchange="bindMultiPickerColumnChange"
value="{{multiIndex}}" range="{{addressMulti}}">
    <view class="picker">
      <view class="name">選擇地址：</view>
          <view class="value">
          {{addressMulti[0][multiIndex[0]]}}，
          {{addressMulti[1][multiIndex[1]]}}，
          {{addressMulti[2][multiIndex[2]]}}
          </view>
    </view>
</picker>
複製程式碼
  1. 先介紹下幾個關鍵字：multiSelector 多列選擇器 地址選擇為三級聯動，因此選擇 mode = multiSelector
  2. bindchange 繫結的是當點選彈出層的 確定 按鈕時繫結的執行方法
  3. bindcolumnchange 當滑動改變彈出從裡面列的資料時，繫結的監聽方法
  4. value 為一個陣列[1,2,3] 分別代表各列資料中選中的 當前列選定內容的索引值
  5. range 資料型別為：陣列 長度表示多少列，陣列的每項表示每列的資料，如 [["上海","北京"],["直轄市"] ["普陀區","靜安區","閘北區"]]
  6. addressMulti[0][multiIndex[0]] 這裡很好理解 addressMulti 為當前彈出層各列的資料陣列 multiIndex 代表彈出層各列選中的資料的索引值 addressMulti[0][multiIndex[0]]為第一列選中的數值

init

首先引入地址json資料 const ADDRESS = require('./../../utils/address.js') 初始化獲取 range

initAddress:function(){
        var addressMulti = [];
        var addressJSON = this.data.addressJSON;
        // 第一緯度
        var ArrayOne = [];
        for (var key in addressJSON) {
            ArrayOne.push(key)
        };
        addressMulti.push(ArrayOne); 
        // 第二緯度
        var ArrayTwo = [];
        for (var key in addressJSON[ArrayOne[0]]) {
            ArrayTwo.push(key)
        };
        addressMulti.push(ArrayTwo);
        // 第三緯度
        var ArrayThree = addressJSON[ArrayOne[0]][ArrayTwo[0]]
        addressMulti.push(ArrayThree);
        this.setData({ addressMulti:addressMulti })
    },
複製程式碼

捕獲當切換每列資料的 資料更新

getKeyList:function(obj){
    var keyList = [];
    if (obj) {
        for (var key in obj) {
            keyList.push(key)
        };
    };
    return keyList;
},
複製程式碼

獲取物件的屬性集合

bindMultiPickerColumnChange: function (e) {
    var _this = this;
    var data = {
        addressMulti: this.data.addressMulti,
        multiIndex: this.data.multiIndex
    };
    data.multiIndex[e.detail.column] = e.detail.value;
    switch (e.detail.column) {
        case 0:
            
            // 計算第二緯度
            var keyOne = data.addressMulti[0][data.multiIndex[0]]
            data.addressMulti[1] =  this.getKeyList(this.data.addressJSON[keyOne])

            // 計算第三緯度
            var keyTwo = data.addressMulti[1][0];
            data.addressMulti[2] = this.data.addressJSON[keyOne][keyTwo];
            
            data.multiIndex[1] = 0;
            data.multiIndex[2] = 0;

            break;
        case 1:
            // 計算第三緯度
            var keyOne = data.addressMulti[0][data.multiIndex[0]]
            var keyTwo = data.addressMulti[1][data.multiIndex[1]]
            data.addressMulti[2] = this.data.addressJSON[keyOne][keyTwo];
            data.multiIndex[2] = 0;
        break;
    }
    this.setData(data);
},
複製程式碼

捕獲改變列資料時，及時更新當前彈出層視口的資料addressMulti

  • 第一列變動： 第二列 第三列資料更新
  • 第二列變動： 第一列不變，第三列資料更新
  • 第三列變動： 第一列 第二列 不變

捕獲變更資料

資料為自動更新

bindMultiPickerChange: function (e) {
    console.log('picker傳送選擇改變，攜帶值為', e.detail.value)
    this.setData({
        multiIndex: e.detail.value
    })

    console.log(this.data.addressMulti[0][this.data.multiIndex[0]]);
    console.log(this.data.addressMulti[1][this.data.multiIndex[1]]);
    console.log(this.data.addressMulti[2][this.data.multiIndex[2]]);
},
複製程式碼

當前為地址三列，其他類似篩選問題，可依賴此方式

如有任何問題，請留言，會及時更正，謝謝

原始碼地址：github

如果喜歡給個start，哈哈hahahahahahahah

相關文章