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

小程序 专栏收录该内容
5 篇文章 0 订阅

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);
  },

 

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值