无码人妻精一区二区三区,eeuss影院www在线观看,无码精品久久久久久人妻中字,日韩av高清在线看片

小程序--三級聯動

最近做的項目中需要添加三級聯動，選擇所在地，而其中三級聯動是自定義的，所以選擇多列選擇器。

小程序關于picker的官方文檔：https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker.html

效果圖：

 

 

 

 

關于wxml頁面很簡單，就一行代碼，相關的屬性可以看文檔來自己定義，這里簡單說明一下是如何渲染的，以及渲染過程中出現的問題。

wxml：

<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange"  range="{{multiArray}}">
   <view>
     {{multiSelect}}
   </view>
</picker>

通過接口返回的數據結構如下圖：

如此可見返回的是對象，需要轉換成數組才可在頁面上渲染

因為后期會多次用到對象轉換為數組，將此封裝為一個函數

js：

  //將js對象變?yōu)閿到M--三級聯動
  toArr(object) {  //object要遍歷的對象   name--我需要的數據，可自定義
    var arr = [];//返回的數組
    for (var i in object) {
      arr.push(object[i].name); //屬性
    }
    return  arr;
  }

在轉換數組的過程中，需要找到相應的某一項下面的所有數據，所以在此基礎上添加查找某一項的功能

js：

  //將js對象變?yōu)閿到M--三級聯動
  toArr(object, findItem) {  //object要遍歷的對象  findItem查找項
    var nameList = [];//返回的數組
    var itemList = [];
    var allMessage;
    for (var i in object) {
      nameList.push(object[i].name); //屬性
      if (findItem && object[i].name == findItem) {  //遍歷對象，找到findItem的所有數據
        itemList = object[i];
      }
    }
    if (findItem){
      allMessage = { 'nameList': nameList, 'itemList': itemList }
    }else{
      allMessage = { 'nameList': nameList}
    }
    return allMessage;
  }

 

準備工作做完，將獲取到到數據整理出來

js：

data: {
    multiArray: [],                 //國家省份三級聯動數組
    objectMultiArray:'',            //中國省份數組
    countriesShowList: [],          //展示的國家數組
    provincesShowList:[],           //展示的省份數組
    citiesShowList:[],              //展示的地區(qū)數組
    provincesShow:false,            //是否第一次渲染省份數組
    multiSelect: '>',                 //選中的所在地
  },

 

// 獲取三級聯動數據
    brm.brm_request(接口地址)      發(fā)送request請求
      .then(function (res) {
        var arr = that.toArr(res.data, "中國")
        console.log(res.data)
        that.setData({
          multiArray: [arr.nameList, ['——'], ['——']],
          objectMultiArray: arr.itemList,
          countriesShowList: arr.nameList
        })
      }, function (err) {
    });

 

  //城市三級聯動選中
  bindMultiPickerChange: function (e) {
    var index = e.detail.value;
    var arr;
    
    if (index[0] == 36){ //選中中國
      if(index[1]== null){
        if (this.data.citiesShowList[index[2]]&&this.data.citiesShowList[index[2]] != '——'){
          arr = this.data.countriesShowList[index[0]] + ',' + this.data.provincesShowList[0] + ',' + this.data.citiesShowList[index[2]]
        }else{
          arr = this.data.countriesShowList[index[0]] + ',' + this.data.provincesShowList[0]
        }
      }else{
        if (this.data.citiesShowList[index[2]] && this.data.citiesShowList[index[2]] != '——') {
          arr = this.data.countriesShowList[index[0]] + ',' + this.data.provincesShowList[index[1]] + ',' + this.data.citiesShowList[index[2]]
        } else {
          arr = this.data.countriesShowList[index[0]] + ',' + this.data.provincesShowList[index[1]]
        }
      }
    } else {
      arr = this.data.countriesShowList[index[0]]
    }
    this.setData({
      multiSelect: arr
    })
  }

 

  //三級聯動城市改變
  bindMultiPickerColumnChange: function (e) {
    var provincesList = this.data.objectMultiArray.provinces;  //省份
    var provincesArr = this.toArr(provincesList).nameList;  //省份數組
    
    //移動第一列時，選中中國的情況
    if (e.detail.column == 0 && e.detail.value == 36){
        this.setData({
          multiArray: [this.data.multiArray[0], provincesArr, ['——']],
          provincesShowList:provincesArr,
          provincesShow:true
        })
    } else if (e.detail.column == 0 && e.detail.value != 36){   //選中非中國的國家情況 
        this.setData({
          multiArray: [this.data.multiArray[0], ['——'], ['——']]
        })
    }

    //移動第二列，選中相應的省份顯示地區(qū)
    if (e.detail.column == 1 && this.data.provincesShow){
        var findProvincesList = this.toArr(provincesList, provincesArr[e.detail.value]); //provincesArr[e.detail.value] 當前選中的省份
        var findCitiesList = this.toArr(findProvincesList.itemList.cities); //當前選中省份的地區(qū)數組
        var citiesList ;

        if (findCitiesList.nameList.length > 0){ //當前省份是否有城市
          citiesList = findCitiesList.nameList;
        }else{
          citiesList = ['——'];
        }
        this.setData({
          multiArray: [this.data.multiArray[0], provincesArr, citiesList],
          citiesShowList: citiesList
        })
    }
  }

 在渲染過程中，遇到的問題：

1.進入頁面后，會默認執(zhí)行了bindcolumnchange事件，并且每一列都移動一次；所以在bindMultiPickerColumnChange函數中，就會執(zhí)行“移動第二列，選中相應的省份顯示地區(qū)”，所以在這里需要給它加一個標識this.data.provincesShow

2.默認選中中國后，不移動第二列，那第二列返回的移動數據為null；多處理一次為null時的情況