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

系统管理员 2021-09-25 09:18 411阅读 0赞

[https://developers.weixin.qq.com/miniprogram/dev/component/picker.html][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);
      },

[https_developers.weixin.qq.com_miniprogram_dev_component_picker.html]: https://developers.weixin.qq.com/miniprogram/dev/component/picker.html