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

Love The Way You Lie 2022-02-28 13:18 772阅读 0赞

### 文章目录 ###

*   *   *  一. picker多列选择器

### 一. picker多列选择器 ###

当pick的属性,mode = multiSelector时, 为多列选择器,要传入二维数组  
多列选择器的属性如下  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70][]  
代码示例如下:

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

当多选框的值变化时, 控制台也会打印变化的值 .  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70]: /images/20220228/89ca872527aa44258cf81f79f97d0de5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1]: /images/20220228/8ad48cffe8744f41a94805e7855e5180.png