小程序自定義城市列表選擇器

我們在開發小程序時，使用官方給的城市選擇器會方便的很多，但有的時候我們需要自己寫一套城市選擇器，

我們所選的城市需要城市id，來對應后端，方便后端處理,不多說，上代碼

首先我們在.wxml中

<view class='item'>
    所在地區 
    <picker mode="multiSelector" bindchange="bindRegionChange" bindcolumnchange="bindRegionColumnChange" range='{{multiArray}}'>
      <text wx:if="{{addressCity}}">{{addressCity[0]}}  {{addressCity[1]}}  {{addressCity[2]}}</text>
      <text wx:else class='placeholder'>請選擇地區</text>
    </picker> 
  </view>

　wxss中

page{background-color: #efeff4;}
.tui-picker-content{
  padding: 30rpx;
  text-align: center;
}
.tui-picker-name{
  height: 80rpx;
  line-height: 80rpx;
}
.tui-picker-detail{
  height: 80rpx;
  line-height: 80rpx;
  background-color: #fff;
  font-size: 35rpx;
  padding: 0 10px;
  overflow: hidden;
}

　　在 .js中寫入邏輯

Page({
  data: {
    province_list: null,
    province_name: null,
    city_list: null,
    city_name: null,
    area_list: null,
    area_name: null,
    addressCity: null,
    multiArray: [],  // 三維數組數據
    multiIndex: [0, 0, 0], // 默認的下標,
    selectProvinceId: null,
    selectCityId: null,
    selectAreaId: null,
  },
  onLoad: function (options) {  //在頁面加載就調用獲取
    this.getProvince()
  },
  //獲取省份列表
  getProvince: function () {
    let that = this
    wx.request({  //網路請求
      url: '',
      data:{
        parentId: 0  //通過parentId來獲取到省份列表 一般來說這個parentId都為0
      }, 
      success(res) {
        let provinceList = [...res.data.data]  //放到一個數組里面
        let provinceArr = res.data.data.map((item) => { return item.name })  //獲取名稱
        that.setData({
          multiArray: [provinceArr, [], []], //更新三維數組  更新完為[['廣東','北京'],[],[]]
          province_list: provinceList,  //省級原始數據
          province_name: provinceArr,  //省級全部名稱
        })
        let defaultCode = that.data.province_list[0].id //使用第一項當作參數獲取市級數據
        if (defaultCode) {
          that.setData({
            currnetProvinceId: defaultCode  //保存當前省份id
          })
          that.getCity(defaultCode) //獲取市區數據
        }
      }
    })
  },
  //根據省份id獲取城市
  getCity: function (id) {
    if(id){
      let that = this
      that.setData({
        currnetProvinceId: id  //這個id是省份id獲取城市
      })
      wx.request({
        url: '',
        data: {
          parentId: id
        },
        success(res) {
          // console.log(res.data.data)
          let cityArr = res.data.data.map((item) => { return item.name }) //返回城市名稱
          let cityList = [...res.data.data]
          that.setData({
            multiArray: [that.data.province_name, cityArr, []],  //更新后[['廣東','北京'],['潮州'，'汕頭','揭陽'],[]]
            city_list: cityList, //保持市級數據
            city_name: cityArr   //市級名稱
          })
          let defaultCode = that.data.city_list[0].id //獲取第一個市的區級數據
          if (defaultCode) {
            that.setData({
              currentCityId: defaultCode //保存當下市id
            })
            that.getArea(defaultCode) //獲取區域數據
          }
        }
      })
    }
    
  },
  //獲取區域
  getArea: function (id) {
    if(id){
      let that = this
      that.setData({
        currentCityId: id    //保存當前選擇市
      })
      wx.request({
        url: '',
        data: {
          parentId: id
        },
        success(res) {
          // console.log(res.data.data)
          let areaList = [...res.data.data]
          let areaArr = res.data.data.map((item) => { return item.name }) //區域名
          that.setData({
            multiArray: [that.data.province_name, that.data.city_name, areaArr],
            area_list: areaList, //區列表
            area_name: areaArr   //區名字
          })
        }
      })
    }
   
  },
  //picker確認選擇地區
  bindRegionChange: function (e) {
    // 因為在獲取省中 北京只有一個選項，導致獲取不了北京》北京》第一個
    if (e.detail.value[1] == null || e.detail.value[2] == null) { //如果只滾動了第一列則選取第一列的第一數據
      this.setData({
        multiIndex: e.detail.value,  //更新下標
        addressCity: [this.data.province_list[e.detail.value[0]].name, this.data.city_list[0].name, this.data.area_list[0].name],
        selectProvinceId: this.data.province_list[e.detail.value[0]].id,
        selectCityId: this.data.city_list[0].id,
        selectAreaId: this.data.area_list[0].id
      })
    } else {
      this.setData({
        multiIndex: e.detail.value,  //更新下標
        addressCity: [this.data.province_list[e.detail.value[0]].name, this.data.city_list[e.detail.value[1]].name, this.data.area_list[e.detail.value[2]].name],
        selectProvinceId: this.data.province_list[e.detail.value[0]].id,
        selectCityId: this.data.city_list[e.detail.value[1]].id,
        selectAreaId: this.data.area_list[e.detail.value[2]].id
      })
    }
    // console.log(this.data.selectProvinceId,this.data.selectCityId,this.data.selectAreaId)
  },
  //滑動地區組件
  bindRegionColumnChange: function (e) {
    // console.log(e.detail.column,e.detail.value)
    let that = this
    let column = e.detail.column  //當前改變的列
    let data = {
      multiIndex: JSON.parse(JSON.stringify(that.data.multiIndex)),
      multiArray: JSON.parse(JSON.stringify(that.data.multiArray))
    }
    data.multiIndex[column] = e.detail.value  //第幾列改變了就是對應multiIndex的第幾個，更新他
    switch (column) {
      case 0:  //第一列改變，省級改變
        let currentProvinceId = that.data.province_list[e.detail.value].id
        if (currentProvinceId != that.data.currentProvinceId) { //判斷當前id是不是更新了
          that.getCity(currentProvinceId)   //獲取當前id下的市級數據
        }
        data.multiIndex[1] = 0    //將市默認選擇第一個
        break
      case 1:  //第二列改變，市級改變
        let currentCityId = that.data.city_list[e.detail.value].id
        if (currentCityId != that.data.currentCityId) {
          that.getArea(currentCityId) //獲取區域
        }
        data.multiIndex[2] = 0  //區域默認第一個
        break
    }
    that.setData(data)  //更新數據
  },
})

　　這樣一個簡單的城市選擇器就搞好了