文章目录
一. 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);
}
}
})
当多选框的值变化时, 控制台也会打印变化的值 .