微信小程序的多列选择器

最新推荐文章于 2024-02-02 12:01:29 发布

转载最新推荐文章于 2024-02-02 12:01:29 发布 · 513 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/fuckingPangzi/p/10244861.html

文章标签：

#json

本文详细介绍了微信小程序中多列选择器的使用方法，包括如何设置双列数组的json数据格式，以及如何通过监听事件获取用户的选择结果。文章通过实例展示了如何利用multiSelector属性实现多列联动效果，并提供了调试技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<picker mode="multiSelector" range='{{arrayObjMulti}}' range-key='id' 
bindchange='changeMulti' bindcolumnchange='columnchange'>
<view>{{showme}}</view>
</picker>

mode = multiSelector 这个是多列选择器。

然后json数据的格式是双列数组。

arrayObjMulti:[
      [
        { id: "1001", name: "1" },
        { id: "1002", name: "2" },
        { id: "1003", name: "3" },
        { id: "1004", name: "4" },
        { id: "1005", name: "5" }
      ],
      [
        { id: "1001", name: "1" },
        { id: "1002", name: "2" },
        { id: "1003", name: "3" },
        { id: "1004", name: "4" },
        { id: "1005", name: "5" }
      ]
    ],

columnchange:function(e){
    //打印对象
    console.log(e.detail);
  },
  changeMulti:function(e){
    var indexs = e.detail.value;
    console.log(indexs.length);
    var arrayObjMulti = this.data.arrayObjMulti;
    console.log(arrayObjMulti);
    for(var i = 0 ; i<indexs.length ; i ++){
      var indexTmp = indexs[i]; 
      console.log(indexTmp);
      console.log(arrayObjMulti[indexs]);
      var id = arrayObjMulti[i][indexTmp].id;
      var name = arrayObjMulti[i][indexTmp].name;
      console.log(id+" "+name)
    }
  }