微信小程序三级联动之多列选择器

有些时候，三级联动业务场景并不只是全国地区选择，可能还涉及到自定义分类的三级联动，这时就需要使用微信的多列选择器。

---

如果只是一列字段，或者每次拖动一次都去服务端取，会比较容易。 如果想一次定义好json,关联数据相对比较复杂，此案例json结构如下：

WX20170926-150637@2x.png

---

效果如下

image.png 这种.png

实现过程

1.WXML(这是一段微信官方文档的代码)

<view class="section">
  <view class="section__title">普通选择器</view>
  <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
    <view class="picker">
      当前选择：{{array[index]}}
    </view>
  </picker>

    <picker bindchange="bindPickerChange1" value="{{index}}" range="{{array}}">
    <view class="picker">
      当前选择：{{array[index]}}
    </view>
  </picker>
</view>

2.js 逻辑部分

// 第一步  data 定义数据
ssl:地区json

//第二步  设置默认三级联动数据
Onload

//获取省市区json
var ssls = this.data.ssl;
//定义对应变量
    var sheng = [];
    var shi = [];
    var qu = [];
    for (var i in ssls) {
      sheng.push(ssls[i].p_name)
      if (i == 0) {
        for (var u in ssls[i].p_city) {
          // console.log(ssls[i].p_city[u].c_name)
          shi.push(ssls[i].p_city[u].c_name)
          for (var j in ssls[i].p_city[u].p_district) {
            // console.log(ssls[i].p_city[u].c_name)
            qu.push(ssls[i].p_city[u].p_district[j].d_name)
          }
        }
      }

    }
    console.log(sheng, shi);
    this.setData({
      multiArray: [sheng, shi, qu]
    });

//第三步：选择对应的value值改变
  bindMultiPickerChange: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      multiIndex: e.detail.value
    })
  },

//第四步：下拉拖动选项事件（这里只需要处理第一栏，与第二栏【因为第三栏拖动的时候，没有第四栏关联变动了，关于此处讲的栏，请看代码后图1-3】）

bindMultiPickerColumnChange: function (e) {
    console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
    var data = {
      multiArray: this.data.multiArray,
      multiIndex: this.data.multiIndex
    };
    data.multiIndex[e.detail.column] = e.detail.value;
    switch (e.detail.column) {
      case 0:
        this.setData({
          thisSheng: e.detail.value
        })
        //此处是拖动第一栏的时候处理
        var row = this.getCity(e.detail.value);
        data.multiArray[1] = row[0];
        data.multiArray[2] = row[1];

        //此处默认选中第一项
        data.multiIndex[1] = 0;
        data.multiIndex[2] = 0;
        break;
      case 1:
         //此处是拖动第二栏的时候处理
        var row = this.getCity(this.data.thisSheng, e.detail.value);
        console.log(row);
        data.multiArray[2] = row[1];
        data.multiIndex[2] = 0;
        console.log(data.multiIndex);
        break;
    }
    this.setData(data);
  },

关键处理函数

// 获取城市信息
  getCity: function (x, y = 999, z = 999) {
    console.log("xy", x, y);
    var ssls = this.data.ssl;
    var shi = [];
    var qu = [];
    for (var i in ssls) {
      if (i == x) {
        for (var u in ssls[i].p_city) {
          shi.push(ssls[i].p_city[u].c_name)
          if (u == y) {
            for (var j in ssls[i].p_city[u].p_district) {
              qu.push(ssls[i].p_city[u].p_district[j].d_name)
            }
            break;
          }
          if (y == 999) {
            for (var j in ssls[i].p_city[u].p_district) {
              qu.push(ssls[i].p_city[u].p_district[j].d_name)
            }
          }

        }
        break;
      }
    }
    console.log(shi);
    return [shi, qu];

  },

---

图1-2.png

代码下载地址：https://github.com/magic007/weApp/tree/master/multiSelector

基本手动实现一次官方的全国地区选择功能，只是相比官方更灵活，能添加更多种类型。