微信小程序 picker multiSelector 多列滚动 代码解读

Posted 2021-05-24 二十六画生的博客

https://developers.weixin.qq.com/miniprogram/dev/component/picker.html

/**
 * e.detail.column ： 列序号，从0开始，往右依次递增
 * data.multiIndex[0] ： 第一列的值序号，从0计数，往下依次递增
 * data.multiIndex[1] ： 第二列的值序号，从0计数，往下依次递增
 * data.multiIndex[2] ： 第三列的值序号，从0计数，往下依次递增
 * 
 * data.multiArray[0]  ： 第一列的元素
 * data.multiArray[1]  ： 第二列的元素
 * data.multiArray[2]  ： 第三列的元素
 */
  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) {//判断第0列的值，从0开始
      case 0: //滑动第一列
        switch (data.multiIndex[0]) {//即第一列的第一个值
          case 0:
            data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'];
            data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
            break;
          case 1:
            data.multiArray[1] = ['鱼', '两栖动物', '爬行动物'];
            data.multiArray[2] = ['鲫鱼', '带鱼'];
            break;
        }
        data.multiIndex[1] = 0;//设置为第二列的第一个值
        data.multiIndex[2] = 0;//设置为第三列的第一个值
        break;
      case 1://滑动第二列
        switch (data.multiIndex[0]) {//判断第一列的值，从0开始
          case 0:
            switch (data.multiIndex[1]) {//判断第二列的值，从0开始
              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://判断第1列的值，当前是1，即第1列的第二个值
            switch (data.multiIndex[1]) {判断第2列的值
              case 0:
                data.multiArray[2] = ['鲫鱼', '带鱼'];
                break;
              case 1:
                data.multiArray[2] = ['青蛙', '娃娃鱼'];
                break;
              case 2:
                data.multiArray[2] = ['蜥蜴', '龟', '壁虎'];
                break;
            }
            break;
        }
        data.multiIndex[2] = 0;
        console.log(data.multiIndex);
        break;
    }
    this.setData(data);
  },