小程序 三级地址联动

说到小程序的地址联动，首先说说小程序组建 picker

从底部弹起的滚动选择器，现支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。官方文档地址

------------------------------------分割线

三级联动 采用 多列选择器: multiSelector

<picker mode="multiSelector" 
bindchange="bindMultiPickerChange"
bindcolumnchange="bindMultiPickerColumnChange"
value="{{multiIndex}}" range="{{addressMulti}}">
    <view class="picker">
      <view class="name">选择地址：</view>
          <view class="value">
          {{addressMulti[0][multiIndex[0]]}}，
          {{addressMulti[1][multiIndex[1]]}}，
          {{addressMulti[2][multiIndex[2]]}}
          </view>
    </view>
</picker>
复制代码

1. 先介绍下几个关键字：multiSelector 多列选择器 地址选择为三级联动，因此选择 mode = multiSelector
2. bindchange 绑定的是当点击弹出层的 确定 按钮时绑定的执行方法
3. bindcolumnchange 当滑动改变弹出从里面列的数据时，绑定的监听方法
4. value 为一个数组[1,2,3] 分别代表各列数据中选中的 当前列选定内容的索引值
5. range 数据类型为：数组 长度表示多少列，数组的每项表示每列的数据，如 [["上海","北京"],["直辖市"] ["普陀区","静安区","闸北区"]]
6. addressMulti[0][multiIndex[0]] 这里很好理解 addressMulti 为当前弹出层各列的数据数组 multiIndex 代表弹出层各列选中的数据的索引值 addressMulti[0][multiIndex[0]]为第一列选中的数值

init

首先引入地址json数据 const ADDRESS = require('./../../utils/address.js') 初始化获取 range

initAddress:function(){
        var addressMulti = [];
        var addressJSON = this.data.addressJSON;
        // 第一纬度
        var ArrayOne = [];
        for (var key in addressJSON) {
            ArrayOne.push(key)
        };
        addressMulti.push(ArrayOne); 
        // 第二纬度
        var ArrayTwo = [];
        for (var key in addressJSON[ArrayOne[0]]) {
            ArrayTwo.push(key)
        };
        addressMulti.push(ArrayTwo);
        // 第三纬度
        var ArrayThree = addressJSON[ArrayOne[0]][ArrayTwo[0]]
        addressMulti.push(ArrayThree);
        this.setData({ addressMulti:addressMulti })
    },
复制代码

捕获当切换每列数据的 数据更新

getKeyList:function(obj){
    var keyList = [];
    if (obj) {
        for (var key in obj) {
            keyList.push(key)
        };
    };
    return keyList;
},
复制代码

获取对象的属性集合

bindMultiPickerColumnChange: function (e) {
    var _this = this;
    var data = {
        addressMulti: this.data.addressMulti,
        multiIndex: this.data.multiIndex
    };
    data.multiIndex[e.detail.column] = e.detail.value;
    switch (e.detail.column) {
        case 0:
            
            // 计算第二纬度
            var keyOne = data.addressMulti[0][data.multiIndex[0]]
            data.addressMulti[1] =  this.getKeyList(this.data.addressJSON[keyOne])

            // 计算第三纬度
            var keyTwo = data.addressMulti[1][0];
            data.addressMulti[2] = this.data.addressJSON[keyOne][keyTwo];
            
            data.multiIndex[1] = 0;
            data.multiIndex[2] = 0;

            break;
        case 1:
            // 计算第三纬度
            var keyOne = data.addressMulti[0][data.multiIndex[0]]
            var keyTwo = data.addressMulti[1][data.multiIndex[1]]
            data.addressMulti[2] = this.data.addressJSON[keyOne][keyTwo];
            data.multiIndex[2] = 0;
        break;
    }
    this.setData(data);
},
复制代码

捕获改变列数据时，及时更新当前弹出层视口的数据addressMulti

• 第一列变动： 第二列 第三列数据更新
• 第二列变动： 第一列不变，第三列数据更新
• 第三列变动： 第一列 第二列 不变

捕获变更数据

数据为自动更新

bindMultiPickerChange: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
        multiIndex: e.detail.value
    })

    console.log(this.data.addressMulti[0][this.data.multiIndex[0]]);
    console.log(this.data.addressMulti[1][this.data.multiIndex[1]]);
    console.log(this.data.addressMulti[2][this.data.multiIndex[2]]);
},
复制代码

当前为地址三列，其他类似筛选问题，可依赖此方式

如有任何问题，请留言，会及时更正，谢谢

源码地址：github

如果喜欢给个start，哈哈hahahahahahahah

转载于:https://juejin.im/post/5b30b35ef265da597e35ab3d