微信小程序 选择地址省市区联动

微信原生地址API，缺少省市区code，因此自己写了一个收货地址
思路：在onload预先加载全部省和第一个省的全部市和区，加载全部会导致几秒的事件阻塞。点击选择地址弹窗后，按需加载操作，滑动省加载对应的市和第一个市对应的区，滑动市加载区，滑动区只更改区的值

 onLoad: function(options) {
    var that = this;
    // 此文件为全部省以及第一个省的市和区
    var cityData = districtLoad.districtLoad;
    // 存放省 
    const provinces = [];
    // 存放市
    const citys = [];
    // 存放区
    const countys = [];
    for (let i = 0; i < cityData.length; i++) {
      provinces.push(cityData[i]);
    }
    for (let i = 0; i < cityData[0].sub.length; i++) {
      citys.push(cityData[0].sub[i])
    }
    for (let i = 0; i < cityData[0].sub[0].sub.length; i++) {
      countys.push(cityData[0].sub[0].sub[i])
    }
    that.setData({
      provinces,
      citys,
      countys
    })
  }

滑动省市区事件

bindChange: function(e) {
    var that = this;
    var val = e.detail.value
    var t = this.data.values;
    // 滑动省
    if (val[0] != t[0]) {
      const citys = [];
      const countys = [];
      // 保存市
      for (let i = 0; i < cityData[val[0]].sub.length; i++) {
        citys.push(cityData[val[0]].sub[i])
      }
      // 保存第一个市的全部区
      for (let i = 0; i < cityData[val[0]].sub[0].sub.length; i++) {
        countys.push(cityData[val[0]].sub[0].sub[i])
      }
      // 保存
      this.setData({
        province: cityData[val[0]].name,
        city: cityData[val[0]].sub[0].name,
        citys: citys,
        countys: countys,
        values: val,
        value: [val[0], 0, 0],
        fdeliveryProvince: this.data.provinces[val[0]].code,
        fdeliveryCity: cityData[val[0]].sub[0].code,
      })
      // 防止只有省市的情况
      if (cityData[val[0]].sub[0].sub.length!=0){
        that.setData({
          county: cityData[val[0]].sub[0].sub[0].name,
          fdeliveryArea: cityData[val[0]].sub[0].sub[0].code
        })
      }else {
        that.setData({
          county: '',
          fdeliveryArea:''
        })
      }
      return;
    }
    // 滑动市
    if (val[1] != t[1]) {
      const countys = [];
      // 保存市
      for (let i = 0; i < cityData[val[0]].sub[val[1]].sub.length; i++) {
        countys.push(cityData[val[0]].sub[val[1]].sub[i])
      }
      // 保存
      this.setData({
        city: this.data.citys[val[1]].name,
        countys: countys,
        values: val,
        value: [val[0], val[1], 0],
        fdeliveryCity: this.data.citys[val[1]].code,
      })
      // 防止只有省市的情况
      if (countys.length != 0) {
        that.setData({
          county: cityData[val[0]].sub[val[1]].sub[0].name,
          fdeliveryArea: cityData[val[0]].sub[val[1]].sub[0].code
        })
      } else {
        that.setData({
          county: '',
          fdeliveryArea: ''
        })
      }
      return;
    }
    // 滑动区
    if (val[2] != t[2]) {
      this.setData({
        county: this.data.countys[val[2]].name,
        values: val,
        fdeliveryArea: this.data.countys[val[2]].code
      })
      return;
    }
  }

html

<view class="citypicker" wx:if="{{condition}}">
  <view class="cityheader">
    <view bindtap="open" class="city-cancel">取消</view>
    <view bindtap="open" class="city-true">确定</view>
  </view>
  <picker-view indicator-style="height: 40px;" style="font-size:30rpx; width: 100%; height: 290px;" value="{{value}}" bindchange="bindChange" class="citybody">
    <picker-view-column>
      <view wx:for="{{provinces}}" wx:key="item.name" wx:code="{{item.code}}" style="line-height: 40px;padding-left:10px;">{{item.name}}</view>
    </picker-view-column>
    <picker-view-column>
      <view wx:for="{{citys}}" wx:key="ititem.nameem" wx:code="{{item.code}}" style="line-height: 40px;padding-left:10px;">{{item.name}}</view>
    </picker-view-column>
    <picker-view-column>
      <view wx:for="{{countys}}" wx:key="item.name" wx:code="{{item.code}}" style="line-height: 40px;padding-left:10px;">{{item.name}}</view>
    </picker-view-column>
  </picker-view>
</view>

效果图