一、wxml中代碼
<view class="in_order_Param">
<text>狀態：</text>
<picker mode="selector"
bindchange="bindPickerChange"
value="{{listQuery.status}}"
range="{{array}}">
<input placeholder="狀態"
name="status"
value="{{name}}" bindinput="handleinput" data-name="status" style="width: 90%"/>
</picker>
</view>
mode值為selector，即普通模式。注意:選擇某一項后，提交的是索引，即listQuery.status為索引值，為數值。選擇后觸發change事件。
二、js中的代碼
data: {
listQuery: {
page: 1, // 頁碼
limit: 5, // 個數
},
array: ['新建', '已發貨', '已收貨', '退貨','已入庫','已備貨','已確認','部分退貨','已作廢'], // 0.新建1.已發貨2.已收貨3.退貨4.已入庫5.已備貨6.已確認7.部分退貨9.已作廢
name: ''
},
onLoad: function () {
this.getSupplyNoteList(true);
},
getSupplyNoteList: function(isRefresh){
var that = this;
console.log(that.data.listQuery);
request.postParam("/api/supply/list",that.data.listQuery,function(res){
wx.hideLoading();
console.log(res)
。。。。。省略。。。。。
});
},
bindPickerChange: function(e) {
// console.log(e);
this.setData({
name: this.data.array[e.detail.value],
'listQuery.status': e.detail.value == 8 ? (parseInt(e.detail.value) + 1) : e.detail.value
})
console.log('picker發送選擇改變，顯示值為', this.data.listQuery.status)
},
觸發change事件后調用bindPickerChange方法，方法中將e中傳遞過來的索引值轉換為狀態對應的中文，這樣頁面就顯示出了狀態的中文。同時修改listQuery.status的值，因為狀態“已作廢”的索引不是8，而是9，所以需要經過處理，然后再發起請求。
頁面效果如下：
