微信小程序自定义城市选择器

微信小程序有自带的省市选择器，但是有时候我们可能想要后台给的数据显示省市区，就要自定义了，不只是省市区，所有的多列都可以。

wxml:

<view>
      <picker class="picker" mode="multiSelector" bindchange="bindMultiPickerChange"  bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}" range-key="{{'label'}}">
            <view>
                当前选择：{{regionStr}}
            </view>
       </picker>
 </view>

js:

data:{
  addressList:[  //城市数据
    {
    value: "110000",
    label: "北京",
    children: [{
        value: "110100",
        label: "北京市",
        children: [{
                value: "110101",
                label: "东城区",
            },
            {
                value: "110102",
                label: "西城区",
            },
            {
                value: "110105",
                label: "朝阳区",
            },
              ...........
            ],
       }],
     },
     .........
  ]
}

//逻辑部分
    bindMultiPickerColumnChange: function (e) {
        //当前列
        var column = e.detail.column;
        var index = e.detail.value;
        var multiIndex = this.data.multiIndex;
        var multiArray = this.data.multiArray;
        var addressList = this.data.addressList;
        multiIndex[column] = index;
        do {
            if (column === 0) {
                multiIndex[1] = 0;
                multiIndex[2] = 0;
                multiArray[1] = addressList[multiIndex[0]].children;
                multiArray[2] = addressList[multiIndex[0]].children[multiIndex[1]].children;
                break;
            }
            if (column === 1) {
                multiIndex[2] = 0;
                multiArray[2] = addressList[multiIndex[0]].children[multiIndex[1]].children;
            }
        } while (false);
        this.setData({
            multiArray: multiArray,
            multiIndex: multiIndex
        });
    },
    
        //确定
    bindMultiPickerChange: function (e) {
        var multiArray = this.data.multiArray;
        var multiIndex = this.data.multiIndex;
        var regionStr = multiArray[0][multiIndex[0]]['label'] + "-" + multiArray[1][multiIndex[1]]['label'] + "-" + multiArray[2][multiIndex[2]]['label'];
        let provinceId = multiArray[0][multiIndex[0]]['value'];
        let cityId = multiArray[1][multiIndex[1]]['value'];
        let countyId = multiArray[2][multiIndex[2]]['value'];
        //console.log(regionStr,'地址');
        //console.log(provinceId,cityId,countyId,'id');
        this.setData({
            regionStr,
            provinceId,
            cityId,
            countyId
        });
    },
    
        init() {
        let addressList = this.data.addressList;
        let multiIndex = this.data.multiIndex;
        //console.log(addressList, '测试地址数据')

        let multiArray = [];
        multiArray[0] = addressList;
        multiArray[1] = addressList[0].children;
        multiArray[2] = addressList[0].children[0].children;
        let regionStr = multiArray[0][multiIndex[0]]['label'] + "-" + multiArray[1][multiIndex[1]]['label'] + "-" + multiArray[2][multiIndex[2]]['label'];
        let provinceId = multiArray[0][multiIndex[0]]['value'];
        let cityId = multiArray[1][multiIndex[1]]['value'];
        let countyId = multiArray[2][multiIndex[2]]['value'];
        this.setData({
            multiArray,
            regionStr,
            provinceId,
            cityId,
            countyId
        })

    },
    
        onReady() {
        this.init();
    },