zoukankan      html  css  js  c++  java
  • 微信小程序--picker

    wxml:

    <view>
    <picker 
    mode="multiSelector" 
    value="{{multiIndex}}"  
    range="{{multiArray}}"
    bindchange="bindMultiPickerChange"
    bindcolumnchange="bindMultiPickerColumnChange" 
    >
    
    <view>
    {{multiArray[0][multiIndex[0]]}}-
    {{multiArray[1][multiIndex[1]]}}-
    {{multiArray[2][multiIndex[2]]}}
    </view>
    
    </picker>
    </view>

    js:

      data: {
           multiIndex: [0, 0, 0],
           //这里全都是 0.0.0 的东西
           multiArray:
            [['无脊柱动物', '脊柱动物'],
             ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], 
             ['猪肉绦虫', '吸血虫']]
           
      },
    
      bindMultiPickerColumnChange: function (e) {
        console.log(e);
        // console.log('修改的列为', e.detail.column, ',值为', e.detail.value);
        //e.detail.column  上一级的id
        //e.detail.value 当前的id
        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:
                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]) {
              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;
            // console.log(data.multiIndex);
            break;
        }
        this.setData(data);
      },
    
      //最后的确定
      bindMultiPickerChange: function (e) {
        console.log(e);
        console.log('picker发送选择改变,携带值为', e.detail.value)
        this.setData({
          multiIndex: e.detail.value
        })
      },
  • 相关阅读:
    生成实用包装码
    区分排序函数
    mysql优化
    高并发、大流量、大存储
    数据库的搬移
    linux查看系统日志及具体服务日志
    springboot拦截器实现
    使用ajax的get请求渲染html
    百度echarts折线图使用示例
    前端特殊符号转码
  • 原文地址:https://www.cnblogs.com/laijinquan/p/7609702.html
Copyright © 2011-2022 走看看