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

直接使用微信官方文档中的picker来开发省市区三级联动 picker

wxml

<view>
  <picker mode="region" bindchange="bindRegionChange" value="{{region}}">
      <text wx:if="{{region==''}}">请选择省市区</text>
      <text wx:if="{{region!=''}}">{{region[0]}}、{{region[1]}}、{{region[2]}}</text>
  </picker>
</view>

js

Page({
  data: {
    region: [],// 选中的数据
  },
  //点击确定按钮
  bindRegionChange: function (e) {
    console.log(e.detail.value)
    console.log(e.detail.code)
    this.setData({
      region: e.detail.value
    })
  }
})

最终效果

点击确定后

这里省市区的名称以及code就可以获取到了

这是使用微信自带的省市区数据，如果想使用自家后台返回的数据这种方法显而是不行的

因为官方的"省市区选择器"mode="region"里的数据是定死的由微信提供，不能做更改，好在同是picker组件mode="multiSelector"时提供了自定义的"多列选择器"：

我这里使用的数据结构大致如下

wxml

<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}" range-key="name" catchtap="save">
  {{multiArray[0][multiIndex[0]].name}}({{multiArray[0][multiIndex[0]].id}}){{multiArray[1].length > 0 ?("，" + multiArray[1][multiIndex[1]].name + "(" + multiArray[1][multiIndex[1]].id + ")"):""}}{{multiArray[2].length > 0 ?("，" + multiArray[2][multiIndex[2]].name + "(" + multiArray[2][multiIndex[2]].id + ")"):""}}
</picker>

属性rang对应是最外层的整个数组，range-key指定选择器上要显示的内容，这里range-key="name"就会显示中文内容，假若range-key="id"显示的就是id字段内容了就是一串数字，眼尖的朋友应该知道其实这串数字就是身份证前六位，通过它们的组合传给后台就可以定位省市区了。

js

Page({
  data: {
    multiArray: [
      [{id:-1,name:"请选择省"}],
      [{id:-1,name:"市"}],
      [{id:-1,name:"区"}]
    ],
    multiIndex: [0,0,0]
  },
  getData()
  {
    wx.request({
      url: 'https://t-*******/user/address/getRegions',
      method:'GET',
      success: res => {
        if (res.data.data){
          var temp = res.data.data;
          this.setData({
            provinces:temp,
            multiArray:[temp, temp[0].cityList, temp[0].cityList[0].areaList],
            multiIndex:[0, 0, 0]
          })
        }
      }
    })     
  },
  save()
  {
    this.getData()
  },
  //点击确定
  bindMultiPickerChange: function (e) {
    this.setData({
      multiIndex: e.detail.value
    })
  },
  //滑动
  bindMultiPickerColumnChange: function(e){
    var data = {
      multiArray: this.data.multiArray,
      multiIndex: this.data.multiIndex
    };
    //更新滑动的第几列e.detail.column的数组下标值e.detail.value
    data.multiIndex[e.detail.column] = e.detail.value;
    //如果更新的是第一列“省”，第二列“市”和第三列“区”的数组下标置为0
    if (e.detail.column == 0){
      data.multiIndex = [e.detail.value,0,0];
    } else if (e.detail.column == 1){
      //如果更新的是第二列“市”，第一列“省”的下标不变，第三列“区”的数组下标置为0
      data.multiIndex = [data.multiIndex[0], e.detail.value, 0];
    } else if (e.detail.column == 2) {
      //如果更新的是第三列“区”，第一列“省”和第二列“市”的值均不变。
      data.multiIndex = [data.multiIndex[0], data.multiIndex[1], e.detail.value];
    }
    var temp = this.data.provinces;
    data.multiArray[0] = temp;
    if ((temp[data.multiIndex[0]].cityList).length > 0){
      //如果第二列“市”的个数大于0,通过multiIndex变更multiArray[1]的值
      data.multiArray[1] = temp[data.multiIndex[0]].cityList;
      var areaArr = (temp[data.multiIndex[0]].cityList[data.multiIndex[1]]).areaList;
      //如果第三列“区”的个数大于0,通过multiIndex变更multiArray[2]的值；否则赋值为空数组
      data.multiArray[2] = areaArr.length > 0 ? areaArr : [];
    }else{
      //如果第二列“市”的个数不大于0，那么第二列“市”和第三列“区”都赋值为空数组
      data.multiArray[1] = [];
      data.multiArray[2] = [];
    }
    //setData更新数据
    this.setData(data);
  }
})

js文件中multiArray代表显示的[省,市,区]数组，multiIndex代表滑动后定位的下标数组。从数据库获取数据后通过[0,0,0]得到初始化的multiArray，通过滑动调用bindMultiPickerColumnChange方法得到新的数组下标数组，进而得到新的数据数组。

这样就实现了使用自家后台返给的数据实现省市区三级联动了~