微信小程序picker实现的省市二级联动

*实现效果完全在前端实现,完整代码已上传至GitHub，地址：https://github.com/FaithYK/picker.git

效果图：

QQ图片20200509175518.png

View部分代码：

<view class="section">
    <view class="section_title">省市选择器</view>
    <picker mode='multiSelector' value="{{addressIndex}}" range="{{addressArray}}" bindchange="bindAddressPickerChange" bindcolumnchange='bindMutiAddressPickerChange'>
        <view class="picker">
        当前选择：{{addressArray[0][addressIndex[0]]}},{{addressArray[1][addressIndex[1]]}}
    </view>
    </picker>                                                                
</view>

css样式代码

.picker{padding: 13px;background-color: #FFFFFF;}

js块部分代码

Page({/*** 页面的初始数据*/
    data: {
        index: 0,
        addressIndex: [0, 0],
        //省份分布
        addressArray: [['北京市', '天津市', '河北省', '山西省', '内蒙古自治区', '辽宁省', '吉林省', '黑龙江省', '上海市', '江苏省', '浙江省', '安徽省', '福建省', '江西省', '山东省', '河南省', '湖北省', '湖南省', '广东省', '广西壮族自治区', '海南省', '重庆市', '四川省', '贵州省', '云南省', '西藏自治区', '陕西省', '甘肃省', '青海省', '宁夏回族自治区', '新疆维吾尔自治区', '台湾省', '香港特别行政区', '澳门特别行政区'],['北京市']
        ] 
    },
    /*** 生命周期函数--监听页面加载*/
    onLoad: function (options) {},
    /*** value 改变时触发 change 事件*/
    bindAddressPickerChange: function (e) {
        console.log('picker发送选择改变，携带值为 ', e.detail.value)
        this.setData({
            index: e.detail.value
        })
    },
    /*** 列改变时触发事件*/
    bindMutiAddressPickerChange: function (e) {
        console.log('修改的列为', e.detail.column, '，值为', e.detail.value)
        var data = {
            addressArray: this.data.addressArray,
            addressIndex: this.data.addressIndex
        }
        data.addressIndex[e.detail.column] = e.detail.value;
        switch (e.detail.column) {
            case 0:
                console.log('addressIndex值为：' + data.addressIndex[0])
                switch (data.addressIndex[0]) {
                    case 0:
                        data.addressArray[1] = ['北京市']
                    break;
                    case 1:
                        data.addressArray[1] = ['天津市']
                    break;
                    后面代码由于篇幅太长，已上传至GitHub,地址：https://github.com/FaithYK/picker.git
                }
                data.addressIndex[1] = 0
            break;
        }
    this.setData(data)
    }
})