微信小程序使用原生的地址选择

效果图：

html:

<picker

          mode="multiSelector"

          bindchange="bindMultiPickerChange"

          bindcolumnchange="bindMultiPickerColumnChange"

          value="{{multiIndex}}"

          range="{{addresList}}"

        >

          <view wx:if="{{district1  !== ''}}" class="box-text">收货地址</view>

          <view wx:if="{{district1  !== ''}}" style="font-size: 30rpx; margin-top: 10rpx;">{{district1}}</view>

          <view wx:if="{{district1 == ''}}" style="color: #999; margin-top: 36rpx;">省市区县、乡镇等</view>

        </picker>

 

 

js:

 

 

 

 

 

 

 

 

 

 代码：

  //获取地址信息

  getAddres() {

    wx.showLoading({

      title: '加载中',

    });

    getApp().request({

      url: ’自己的api‘,

      success: (res) => {

        this.setData({

          addresDetail: res.data.list,

        });

        wx.hideLoading();

        this.getSelectAddres();

      },

    });

  },

// 处理数据

  getSelectAddres() {

    let addre = []; //省

    let addres = []; //市

    let address = []; // 区

    let addre1 = []; //大的list[[省],[市],[区]]

    for (var i = 0; i < this.data.addresDetail.length; i++) {

      addre.push(this.data.addresDetail[i].name);

    }

    addre1.push(addre);

    for (var y = 0; y < this.data.addresDetail[this.data.value].list.length; y++) {

      addres.push(this.data.addresDetail[this.data.value].list[y].name);

    }

    addre1.push(addres);

    for (var x = 0; x < this.data.addresDetail[this.data.value].list[this.data.value1].list.length; x++) {

      address.push(this.data.addresDetail[this.data.value].list[this.data.value1].list[x].name);

    }

    addre1.push(address);

    this.setData({

      addresList: addre1,

    });

  },

  //选择地址

  bindMultiPickerColumnChange: function (e) {

    if (e.detail.column == 0) {

      this.setData({

        value: e.detail.value,

      });

    }

    if (e.detail.column == 1) {

      this.setData({

        value1: e.detail.value,

      });

    }

    this.getSelectAddres();

  },

  // 点击确认

  bindMultiPickerChange: function (e) {

    let arr = e.detail.value;

    this.setData({

      province: this.data.addresDetail[arr[0]].name,

      province_id: this.data.addresDetail[arr[0]].code,

      city: this.data.addresDetail[arr[0]].list[arr[1]].name,

      city_id: this.data.addresDetail[arr[0]].list[arr[1]].code,

      district: this.data.addresDetail[arr[0]].list[arr[1]].list[arr[2]].name,

      district_id: this.data.addresDetail[arr[0]].list[arr[1]].list[arr[2]].code,

      district1:

        this.data.addresDetail[arr[0]].name +

        this.data.addresDetail[arr[0]].list[arr[1]].name +

        this.data.addresDetail[arr[0]].list[arr[1]].list[arr[2]].name,

    });

  },