微信小程序picker多列选择器 详解

PS：multiArray：是一个二维数组，其中有几个元素，证明是几列选择器；初始化存放的是“各列”默认数据，随着操作变化，multiArray动态存放当前选中数据对应的各列数据。（语言表达能力太差了，希望大家结合程序能看懂）

multiIndex：是一维数组，用来存放各列选中值的下标。

以下代码为官方示例，代码中进行了注释。

wxml页面：

 <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
    <view class="picker">
    <!--3列的默认值 multiArray[0][0],multiArray[1][0],multiArray[1][0]  -->
        {{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
     </view>
 </picker>

js页面：

  /**
   * 页面的初始数据
   */
  data: {
    index: 0,
    //multiArray是二维数组，picker多列选择器只支持二维数组
    multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']],  
     //multiIndex一维数组，存放各列选中的值下标
    //默认值multiIndex: [0, 0, 0]，其中第一个0表示选中multiArray[0][0]‘无脊柱动物’，第二个0表示选中multiArray[1][0]'扁性动物',第三个0表示选中multiArray[2][0]'猪肉绦虫'
    multiIndex: [0, 0, 0]
  },

  //bindMultiPickerChange选完数据，点击确定后触发
  bindMultiPickerChange: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      multiIndex: e.detail.value
    })
  },
  //bindMultiPickerColumnChange 选完一列，则在当前列触发一次
  bindMultiPickerColumnChange: function (e) {
    console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
    var data = {
      multiArray: this.data.multiArray,
      multiIndex: this.data.multiIndex
    };
    //e.detail.column  取值范围 0 1 2
    //记录当前选择列的值的下标
    data.multiIndex[e.detail.column] = e.detail.value;    
    //根据当前选择的列，联动更新后面两列的值，当e.detail.column=3时，上面一句完成赋值后，跳过下面switch，
    switch (e.detail.column) {
      case 0://当前滑动操作了第0列===============
        switch (data.multiIndex[0]) {
          case 0://无脊柱动物
            data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'];
            data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
            break;
          case 1://脊柱动物
            data.multiArray[1] = ['鱼', '两栖动物', '爬行动物'];
            data.multiArray[2] = ['鲫鱼', '带鱼'];
            break;
        }
        //后面两列默认值都为第0个元素
        data.multiIndex[1] = 0;
        data.multiIndex[2] = 0;
        break;
      case 1://当前滑动操作了第1列===============
        switch (data.multiIndex[0]) {
          case 0://无脊柱动物
            switch (data.multiIndex[1]) {
              case 0://扁形动物
                data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
                break;
              case 1://线形动物
                data.multiArray[2] = ['蛔虫'];
                break;
              case 2://环节动物
                data.multiArray[2] = ['蚂蚁', '蚂蟥'];
                break;
              case 3://软体动物
                data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓'];
                break;
              case 4:
                data.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物'];
                break;
            }
            break;
          case 1://脊柱动物
            switch (data.multiIndex[1]) {
              case 0:
                data.multiArray[2] = ['鲫鱼', '带鱼'];
                break;
              case 1:
                data.multiArray[2] = ['青蛙', '娃娃鱼'];
                break;
              case 2:
                data.multiArray[2] = ['蜥蜴', '龟', '壁虎'];
                break;
            }
            break;
        }
        data.multiIndex[2] = 0;
        break;
    }
    console.log(data.multiIndex);
    this.setData(data);
  },