微信小程序之picker组件（多列选择器）

1、 需求：省市选择器。

原生的省市区（mode=region）选择器只能获取汉字，不能定制每个省市的id，另外区选择器实际项目中没有使用到，思考下后选择手动修改多列选择器（mode=multiSelector）实现功能。

2、 实现效果

省市联动效果

3、代码

实现原理：multiArray是二维数组，省数据保存在二维数组第0个中，市数据切换放入二维数据第1个中，根据multiIndex确定选择项。
数据：省市是静态数据保存在config，数据格式下图

[{
    value: '110000',
    label: '北京市',
    level: 1,
    children: [
      {
        value: '110000',
        label: '北京市',
        level: 2
      }
    ]
  },
  {
    value: '500000',
    label: '重庆市',
    level: 1,
    children: [
      {
        value: '500000',
        label: '重庆市',
        level: 2
      }
    ]
  }]

wxml:

<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}" range-key="label">
      <view class="picker">
        {{multiArray[0][multiIndex[0]].label}}，{{multiArray[1][multiIndex[1]].label}}
      </view>
</picker>

首先在onload中获取数据塞在picker组件中

async onLoad() {
    this.multiArray = [[...city], [...city[0].children]];
    this.$apply();
}

之后监听bindMultiPickerColumnChange列change事件，滚动第一列更改第二列数据

bindMultiPickerColumnChange: function(e) {
      var data = {
        multiArray: this.data.multiArray,
        multiIndex: this.data.multiIndex
      };
      data.multiIndex[e.detail.column] = e.detail.value;
      switch (e.detail.column) {
        case 0:
          data.multiArray[1] = city[e.detail.value].children;
          break;
      }
      this.multiArray = this.data.multiArray;
      this.multiIndex = this.data.multiIndex;
      // 使用wepy开发，this.$apply()为脏数据检查
      this.$apply();
}

选择省市后获取选择选项，所有数据都保存在multiArray中

bindMultiPickerChange: function(e) {
      console.log(
        this.multiArray[0][e.detail.value[0]],
        this.multiArray[1][e.detail.value[1]]
      ); // {value: "431000", label: "郴州市", level: 2}
      this.multiIndex = e.detail.value;
      this.$apply();
 }