微信小程序 省份固定的城市联动效果---多列合并版

之前写了一个省市区分开选择的demo，后来干脆再弄一个合并的，记录一下。

wxml

<view class="section">
  <view class="section__title">多列选择器</view>
  <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}" range-key="text">
    <view class="picker">
      当前选择：{{multiArray[0][multiIndex[0]].text}}-{{multiArray[1][multiIndex[1]].text}}-{{multiArray[2][multiIndex[2]].text}}
    </view>
  </picker>
</view>

js

Page({
  data: {
    multiArray: [[
      {
        value: "000",
        text: "河北省",
        children: [
        {
          value: "130100",
          text: "石家庄市",
          children: [{
            value: "130102",
            text: "长安区"
          }, {
            value: "130103",
            text: "桥东区"
          }, {
            value: "130104",
            text: "桥西区"
          }, {
            value: "130105",
            text: "新华区"
          }, {
            value: "130107",
            text: "井陉矿区"
          }, {
            value: "130108",
            text: "裕华区"
          }, {
            value: "130121",
            text: "井陉县"
          }, {
            value: "130123",
            text: "正定县"
          }, {
            value: "130124",
            text: "栾城县"
          }, {
            value: "130125",
            text: "行唐县"
          }, {
            value: "130126",
            text: "灵寿县"
          }, {
            value: "130127",
            text: "高邑县"
          }, {
            value: "130128",
            text: "深泽县"
          }, {
            value: "130129",
            text: "赞皇县"
          }, {
            value: "130130",
            text: "无极县"
          }, {
            value: "130131",
            text: "平山县"
          }, {
            value: "130132",
            text: "元氏县"
          }, {
            value: "130133",
            text: "赵县"
          }, {
            value: "130181",
            text: "辛集市"
          }, {
            value: "130182",
            text: "藁城市"
          }, {
            value: "130183",
            text: "晋州市"
          }, {
            value: "130184",
            text: "新乐市"
          }, {
            value: "130185",
            text: "鹿泉市"
          }, {
            value: "130186",
            text: "其它区"
          }]
        }, {
          value: "130200",
          text: "唐山市",
          children: [{
            value: "130202",
            text: "路南区"
          }, {
            value: "130203",
            text: "路北区"
          }, {
            value: "130204",
            text: "古冶区"
          }, {
            value: "130205",
            text: "开平区"
          }, {
            value: "130207",
            text: "丰南区"
          }, {
            value: "130208",
            text: "丰润区"
          }, {
            value: "130223",
            text: "滦县"
          }, {
            value: "130224",
            text: "滦南县"
          }, {
            value: "130225",
            text: "乐亭县"
          }, {
            value: "130227",
            text: "迁西县"
          }, {
            value: "130229",
            text: "玉田县"
          }, {
            value: "130230",
            text: "唐海县"
          }, {
            value: "130281",
            text: "遵化市"
          }, {
            value: "130283",
            text: "迁安市"
          }, {
            value: "130284",
            text: "其它区"
          }]
        }, {
          value: "130300",
          text: "秦皇岛市",
          children: [{
            value: "130302",
            text: "海港区"
          }, {
            value: "130303",
            text: "山海关区"
          }, {
            value: "130304",
            text: "北戴河区"
          }, {
            value: "130321",
            text: "青龙满族自治县"
          }, {
            value: "130322",
            text: "昌黎县"
          }, {
            value: "130323",
            text: "抚宁县"
          }, {
            value: "130324",
            text: "卢龙县"
          }, {
            value: "130398",
            text: "其它区"
          }, {
            value: "130399",
            text: "经济技术开发区"
          }]
        }, {
          value: "130400",
          text: "邯郸市",
          children: [{
            value: "130402",
            text: "邯山区"
          }, {
            value: "130403",
            text: "丛台区"
          }, {
            value: "130404",
            text: "复兴区"
          }, {
            value: "130406",
            text: "峰峰矿区"
          }, {
            value: "130421",
            text: "邯郸县"
          }, {
            value: "130423",
            text: "临漳县"
          }, {
            value: "130424",
            text: "成安县"
          }, {
            value: "130425",
            text: "大名县"
          }, {
            value: "130426",
            text: "涉县"
          }, {
            value: "130427",
            text: "磁县"
          }, {
            value: "130428",
            text: "肥乡县"
          }, {
            value: "130429",
            text: "永年县"
          }, {
            value: "130430",
            text: "邱县"
          }, {
            value: "130431",
            text: "鸡泽县"
          }, {
            value: "130432",
            text: "广平县"
          }, {
            value: "130433",
            text: "馆陶县"
          }, {
            value: "130434",
            text: "魏县"
          }, {
            value: "130435",
            text: "曲周县"
          }, {
            value: "130481",
            text: "武安市"
          }, {
            value: "130482",
            text: "其它区"
          }]
        }]
      }]
    ],
    multiIndex: [0, 0, 0]
  },
  bindMultiPickerChange: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      multiIndex: e.detail.value
    })
  },
  bindMultiPickerColumnChange: function (e) {
    console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
    if(e.detail.column != 1) return;
    let _index = e.detail.value;
    this.setData({
      multiArray: [this.data.multiArray[0],this.data.multiArray[0][0].children,this.data.multiArray[0][0].children[_index].children]
    })
  },
  
  onLoad: function () {
    this.setData({
      multiArray: [this.data.multiArray[0],this.data.multiArray[0][0].children,this.data.multiArray[0][0].children[0].children]
    })
  }
})

效果图