小程序省市区三级联动的实现

微信小程序——省市区三级联动的实现

1.引入area.js :全国省市区

下载链接：https://pan.baidu.com/s/1z2jBXzvYDWEPT3d5LIrgKA 密码：pugd

2. address.wxml实例

    <view>
        <view>所在区域view>
        <view class="item-view" bindtap="openPickerView">
          <text wx:if="{{!addressName}}" class="choose-area">请选择详细区域text>
          <text wx:if="{{addressName}}" class="address-text">{{addressName}}text>
      view>
view>

3. address.js实例代码

//引入area.js
const AreaData = require("area.js");

data: {
    addressName: '',  //所在地区
    provId: '', //省ID
    cityId: '',     //市ID
    areaId: '', //区ID
    showPickerView: false,  //控制省市区三级联动显隐
    isdefault: false,//控制设置默认地址
    value: [0, 0, 0],
    tempValue: [0, 0, 0],
    provArr: AreaData.result, //省数组
    cityArr: AreaData.result[0].city, //市数组
    areaArr: AreaData.result[0].city[0].area, //区数组
  },

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
      let addressData = JSON.parse(options.addressData);
      that.saveAddressData(addressData);
  },

saveAddressData(addressData) {
    let ProvArr = AreaData.result;
    let valArr = [];
    // 遍历省数组
    for (let i = 0; i < ProvArr.length; i++) {
      // console.log(ProvArr[i].id); 
      // 找到省对应的id
      if (ProvArr[i].id == addressData.province) {
        //提取对应省名
        let provName = ProvArr[i].name;
        // 提取对应省名在数组中对应的id
        valArr.push(i);
        // 提取对应省名下的城市数组
        let cityArr = ProvArr[i].city;
        console.log('provName:', provName);
        console.log('valArr:', valArr);
        // 遍历对应省名下的城市数组
        for (let j = 0; j < ProvArr[i].city.length; j++) {
          //console.log("cityId", ProvArr[i].city[j].id);
          // 找到市对应的id
          if (ProvArr[i].city[j].id == addressData.city) {
            // 提取对应市名
            let cityName = ProvArr[i].city[j].name;
            // 提取对应市名在数组中对应的id
            valArr.push(j);
            // 提取对应市名下的区数组
            let areaArr = ProvArr[i].city[j].area;
            console.log('cityName:', cityName);
            console.log('valArr:', valArr);
            // 遍历对应市名下的区数组
            for (let k = 0; k < ProvArr[i].city[j].area.length; k++) {

              // 找到区对应的id
              if (ProvArr[i].city[j].area[k].id == addressData.region) {
                // 提取对应区名
                let areaName = ProvArr[i].city[j].area[k].name;
                // 提取对应区名在数组中对应的id
                valArr.push(k);

                let addressName = provName + cityName + areaName;
                this.setData({
                  address: addressData.address,
                  addressName: addressName,
                  value: valArr,
                  cityArr: cityArr,
                  areaArr: areaArr,
                  provId: addressData.provName,
                  cityId: addressData.cityName,
                  areaId: addressData.areaName,
                  isdefault: addressData.isdefault == 1 ? true : false
                })
              }
            }
          }
        }

      }
    }
  },

//三级联动触发方法
  bindChange: function (e) {
    let val = e.detail.value
    if (val[0] != this.data.tempValue[0]) {
      val = [val[0], 0, 0]
    }
    if (val[1] != this.data.tempValue[1]) {
      val = [val[0], val[1], 0]
    }
    console.log('bindChange:', val);
    this.setData({
      tempValue: val,
      value: val,
      cityArr: AreaData.result[val[0]].city,
      areaArr: AreaData.result[val[0]].city[val[1]].area,
    })
  },

  //打开省市区三级联动
  openPickerView() {
    this.setData({
       showPickerView: true,
       dleg3:true,
        });
  },
  //关闭省市区三级联动
  closePickerView() {
    this.setData({ 
      showPickerView: false ,
      dleg3: false,
    });
  },

  //省市区三级联动确定
  confirmPickerView() {
    let val = this.data.value;
    let provName = AreaData.result[val[0]].name;
    let cityName = AreaData.result[val[0]].city[val[1]].name;
    let areaName = AreaData.result[val[0]].city[val[1]].area[val[2]].name;
    let addressName = provName + cityName + areaName;
    let provId = AreaData.result[val[0]].id;
    let cityId = AreaData.result[val[0]].city[val[1]].id;
    let areaId = AreaData.result[val[0]].city[val[1]].area[val[2]].id;
    this.setData({
      addressName: addressName,
      provId: provName,
      cityId: cityName,
      areaId: areaName,
      showPickerView: false,
      isdefault: addressData.isdefault == 1 ? true : false
    })
  },

 //设为默认地址
  bindDefAddress() {
    this.setData({ isdefault: !this.data.isdefault });
  },
  //取消按钮
  bindCancelButton() {
    wx.navigateBack();
  },