微信小程序day03_06之form组件之picker多列选择器

一. picker多列选择器

当pick的属性,mode = multiSelector时, 为多列选择器,要传入二维数组
多列选择器的属性如下

代码示例如下:

wxml中的代码如下

<view style='margin-top:100rpx;'> 多列选择器 </view>

<picker mode="multiSelector" range="{{arrayMul}}">
  我是多列选择器,传入二维数组
</picker>

<picker bindchange="changeFun" bindcancel="cancelFun"  bindchange="columnchangeMulti" 
bindcolumnchange="columnchange"
mode="multiSelector" range="{{arrayObjMul}}" range-key="name">
    <view>{{showme}}</view>
</picker>

js的代码如下

Page({

  data: {
    showme: "请选择一个人名",
    arrayMul: [
      [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
    ],
    arrayObjMul: [
      [
        { id: 1001, name: "jack" },
        { id: 1002, name: "lily" },
        { id: 1003, name: "jay" },
        { id: 1004, name: "mike" }
      ],
      [
        { id: 1001, name: "jack" },
        { id: 1002, name: "lily" },
        { id: 1003, name: "jay" },
        { id: 1004, name: "mike" }
      ]
    ]
  },
  changeFun: function(e){
     var index= e.detail.value;
     console.log("index的下标为:" + index);

     var id=this.data.arrayObj[index].id;
     var name =this.data.arrayObj[index].name;
     
     this.setData({
       showme:  name 
     })

  },
  cancelFun: function(e){
     console.log("触发取消事件");
  },
  columnchange : function(e){
    console.log(e.detail)
  },
  columnchangeMulti : function(e){
    var indexs= e.detail.value;
    var arrayObjMulti = this.data.arrayObjMul;
    
    for (var i=0;i<indexs.length;i++){
      var indexTemp=indexs[i];
      
      var id=arrayObjMulti[i][indexTemp].id;
      var name = arrayObjMulti[i][indexTemp].name;
      console.log(id+"  "+name);
    }
  }
})

当多选框的值变化时, 控制台也会打印变化的值 .