這篇文章主要介紹了微信小程式picker 元件詳解及簡單實例的相關資料,需要的朋友可以參考下
實現效果圖:
微信小程式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} |
範例程式碼:<view class="section">
<view class="sectiontitle">地区选择器</view>
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
<view class="picker">
当前选择:{{array[index]}}
</view>
</picker>
</view>
<view class="section">
<view class="sectiontitle">时间选择器</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="sectiontitle">日期选择器</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
})
}
})
以上是微信小程式picker元件詳解實例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!