微信小程序--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
    })
  },

 

posted @ 2017-09-29 09:56  1O(∩_∩)O1  阅读(297)  评论(0编辑  收藏  举报