1. 程式人生 > >微信小程式的多列選擇器

微信小程式的多列選擇器

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

我說的不清楚,只能除錯弄懂