【微信小程序遇到的坑】 picker实现三级联动

本篇介绍如何使用object数组实现三级联动。（微信官方文档并没明确给出使用方法 -.-''）

picker实现三级联动

实现效果如下，切换列表时，数据相应改变

切换列后

wxml：

          <picker mode="multiSelector" bindchange="bindPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}" range-key="{{'name'}}">
            <view class="picker">
              当前选择：{{multiArray[0][multiIndex[0]].name}}，{{multiArray[1][multiIndex[1]].name}}，{{multiArray[2][multiIndex[2]].name}}
            </view>
          </picker>

js:

// pages/home/home.js

//定义三列数组数据，方便动态交互
let multiArray0 = [
  {
    id: 0,
    name: '无脊柱动物'
  },
  {
    id: 1,
    name: '脊柱动物'
  }
];
let multiArray1 = [
  {
    id: 0,
    name: '扁性动物'
  },
  {
    id: 1,
    name: '线形动物'
  },
  {
    id: 2,
    name: '环节动物'
  }
];
let multiArray2 = [
  {
    id: 0,
    name: '猪肉绦虫'
  },
  {
    id: 1,
    name: '吸血虫'
  }
];
Page({
  /**
   * 页面的初始数据
   */
  data: {
    multiArray: [multiArray0, multiArray1, multiArray2],//封装obj
    multiIndex: [0, 0, 0],
  },
  bindPickerChange: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  },
  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:
        switch (data.multiIndex[0]) {
          case 0:
          //0时使用默认数据
            data.multiArray[1] = multiArray1;
            data.multiArray[2] = multiArray2;
            break;
          case 1:
            //1时使用新数据，也可通过wx.request请求数据进行替换
            let list2_1 = [{ id: 0, name: '鱼' }, { id: 1, name: '两栖动物' }]
            let list2_2 = [{ id: 0, name: '鲫鱼' }, { id: 0, name: '带鱼' }]
            data.multiArray[1] = list2_1;
            data.multiArray[2] = list2_2;
            break;
        }
        data.multiIndex[1] = 0;
        data.multiIndex[2] = 0;
        break;
      //第二列（扁性动物）
      case 1:
        switch (data.multiIndex[0]) {
          case 0:
            switch (data.multiIndex[1]) {
              case 0:
                //0时使用默认数据
                data.multiArray[2] = multiArray2;
                break;
              case 1:
                let list2_4 = [{ id: 0, name: '蚂蚁' }]
                data.multiArray[2] = list2_4;
                break;
              case 2:
                let list2_5 = [{ id: 0, name: '河蚌' }]
                data.multiArray[2] = list2_5;
                break;
            }
            break;
          case 1:
            switch (data.multiIndex[1]) {
              case 0:
                let list2_7 = [{ id: 0, name: '蛞蝓' }]
                data.multiArray[2] = list2_7;
                break;
              case 1:
                let list2_8 = [{ id: 0, name: '昆虫' }]
                data.multiArray[2] = list2_8;
                break;
            }
            break;
        }
        data.multiIndex[2] = 0;
        console.log(data.multiIndex);
        break;
    }
    this.setData(data);
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

})

直接引用代码，可直接进行自己的定制化操作 ~^_^~