溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
微信小程序picker
相關文章：
微信小程序 Button
微信小程序 radio
微信小程序 slider
微信小程序 switch
微信小程序 textarea
微信小程序 picker-view
微信小程序 picker
微信小程序 label
微信小程序 input
微信小程序 form
微信小程序 checkbox
實現效果圖：
微信小程序picker
滾動選擇器，現支持三種選擇器，通過mode來區分，分別是普通選擇器，時間選擇器，日期選擇器，默認是普通選擇器
普通選擇器：mode=selector
| 屬性名 | 類型 | 默認值 | 說明 |
|---|---|---|---|
| range | Array | [] | mode為selector時，range有效 |
| value | Number | 0 | mode為selector時，是數字，表示選擇了range中的第幾個，從0開始。 |
| bindchange | EventHandle | value改變時觸發change事件，event.detail= { value:value} |
時間選擇器：mode=time
| 屬性名 | 類型 | 默認值 | 說明 |
|---|---|---|---|
| value | String | 表示選中的時間，格式為"hh:mm" | |
| String | 表示有效時間范圍的開始，字符串格式為"hh:mm" | ||
| String | 表示有效時間范圍的結束，字符串格式為"hh:mm" | ||
| EventHandle | value改變時觸發change事件，event.detail= { value:value} |
日期選擇器：mode=date
| 屬性名 | 類型 | 默認值 | 說明 |
|---|---|---|---|
| value | String | 0 | 表示選中的日期，格式為"yyyy-MM-dd" |
| start | String | 表示有效日期范圍的開始，字符串格式為"yyyy-MM-dd" | |
| end | String | 表示有效日期范圍的結束，字符串格式為"yyyy-MM-dd" | |
| fields | String | day | 有效值year,month,day，表示選擇器的粒度 |
| bindchange | EventHandle | value改變時觸發change事件，event.detail= { value:value} |
示例代碼：
<view class="section">
<view class="section__title">地區選擇器</view>
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
<view class="picker">
當前選擇：{{array[index]}}
</view>
</picker>
</view>
<view class="section">
<view class="section__title">時間選擇器</view>
<picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
<view class="picker">
當前選擇: {{time}}
</view>
</picker>
</view>
<view class="section">
<view class="section__title">日期選擇器</view>
<picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
<view class="picker">
當前選擇: {{date}}
</view>
</picker>
</view>
Page({
data: {
array:["美國","中國","巴西","日本"],
index:0,
date:"2016-09-01",
time:"12:01"
},
bindPickerChange: function(e) {
console.log('picker發送選擇改變，攜帶值為', e.detail.value)
this.setData({
index: e.detail.value
})
},
bindDateChange:function(e){
this.setData({
date:e.detail.value
})
},
bindTimeChange:function(e){
this.setData({
time:e.detail.time
})
}
})
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
