小程序 三级地址联动

说到小程序的地址联动，首先说说小程序组建 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]]); },

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

作者：liuzimu
链接：https://juejin.im/post/5b30b35ef265da597e35ab3d
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。