官方是這樣描述picker的
1列赎、range 主要指服務端返回的數(shù)據(jù)集（也可自定義數(shù)據(jù)），類型為Array唬血。
2咆课、value 主要指range數(shù)組的下標，類型為Number颗味。
3超陆、bindchange 主要指改變選項時觸發(fā)的事件。其中event.detail.value可獲取自身value的值浦马。
1时呀、由于range屬性值為整個下拉選項的數(shù)據(jù)集及value為range的下標，所以要顯示當前選項即：{{array[index]}}晶默。
2谨娜、下拉選項彈層的樣式為底部彈出，如下圖荤胁。
picker通過form提交的時候瞧预，肯定提交的是自己的value屎债，那么就相當于永遠提交的是0仅政、1、2盆驹、3圆丹、4、5…… 這樣的話問題就來了躯喇，咱們要這些個0123有個毛用辫封？例如服務端返回這樣的數(shù)據(jù)：
show_arr = [ //定義假數(shù)據(jù)
{ “id” : “a6745” , “name”:”Bill” },
{ “id” : “b4433” , “name”:”George” },
{ “id” : “c5674” , “name”:”Thomas” },
{ “id” : “d5543” , “name”:”jack” },
{ “id” : “e7554” , “name”:”tim” }
];
這樣每次選擇名字之后，我想提交的是對應的id廉丽。例如選擇jack那么我想傳遞d5543,這個是我們想要的倦微，可是現(xiàn)在總給我們返回012345……這是什么鬼？正压？欣福？
id:{{item.id}}===>name:{{item.name}}
請選擇
{{picker_arr[picker_index]}}
form提交
結(jié)果為：{{result}}
css代碼：
#show{
text-align:center;
font-size:60rpx;
display:block;
color:#fff;
background-color:green;
padding:10rpx0;
}
.selected{
background-color:pink;
}
.submit{
background-color:yellow;
}
.result{
background-color:red;
}
js代碼：
Page({
data:{
show_arr:[],//展示所有假數(shù)據(jù)
picker_arr:[],//picker中range屬性值
picker_index:0,//picker中value屬性值
id_arr:[],//存儲id數(shù)組
result:''//form提交最終結(jié)果
},
onLoad:function(options){
varpicker_arr=[],
id_arr=[],
show_arr=[//定義假數(shù)據(jù)
{"id":"a6745","name":"Bill"},
{"id":"b4433","name":"George"},
{"id":"c5674","name":"Thomas"},
{"id":"d5543","name":"jack"},
{"id":"e7554","name":"tim"}
];
show_arr.forEach(function(e){
picker_arr.push(e.name);
id_arr.push(e.id);
})
this.setData({show_arr:show_arr,picker_arr:picker_arr,id_arr:id_arr});
},
bindPickerChange:function(e){//選項改變觸發(fā)事件
this.setData({
picker_index:e.detail.value
})
},
formSubmit:function(e){//表單提交觸發(fā)事件
varresult=this.data.id_arr[e.detail.value.selector];
this.setData({result:result});
}
})
原文地址：表單組件Form提交之蛋疼的___picker普通選擇器模式-微信小程序俱樂部 www.wxappclub.com
轉(zhuǎn)載于：http://www.wxappclub.com/topic/687
