微信小程序 (十八)picker組件詳細(xì)介紹

picker選擇器分為三種,普通選擇器,時(shí)間選擇器, 日期選擇器 用mode屬性區(qū)分,默認(rèn)是普通選擇器。測(cè)試時(shí)時(shí)間和日期點(diǎn)擊無(wú)反應(yīng)不知道是BUG還是啥!沒(méi)法手機(jī)測(cè)試現(xiàn)在也不知道咋回事??!
主要屬性:
普通選擇器

時(shí)間選擇器

日期選擇器

wxml
<view>普通選擇器</view>
<!--mode默認(rèn)selector range數(shù)據(jù)源value選擇的index bindchange事件監(jiān)聽(tīng)-->
<picker mode="selector" range="{{array}}" value="{{index}}" bindchange="listenerPickerSelected">
<text>{{array[index]}}</text>
</picker>
<view>時(shí)間選擇器</view>
<picker mode="time" value="{{time}}" start="06:00" end="24:00" bindchange="listenerTimePickerSelected">
<text>{{time}}</text>
</picker>
<view>日期選擇器</view>
<picker mode="date" value="{{date}}" start="2016-09-26" end="2017-10-10" bindchange="listenerDatePickerSelected">
<text>{{date}}</text>
</picker>
js
Page({
data:{
// text:"這是一個(gè)頁(yè)面"
array: ['Android', 'IOS', 'ReactNativ', 'WeChat', 'Web'],
index: 0,
time: '08:30',
date: '2016-09-26'
},
/**
* 監(jiān)聽(tīng)普通picker選擇器
*/
listenerPickerSelected: function(e) {
//改變index值,通過(guò)setData()方法重繪界面
this.setData({
index: e.detail.value
});
},
/**
* 監(jiān)聽(tīng)時(shí)間picker選擇器
*/
listenerTimePickerSelected: function(e) {
//調(diào)用setData()重新繪制
this.setData({
time: e.detail.value,
});
},
/**
* 監(jiān)聽(tīng)日期picker選擇器
*/
listenerDatePickerSelected:function(e) {
this.setDate({
date: e.detail.value
})
},
onLoad:function(options){
// 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù)
},
onReady:function(){
// 頁(yè)面渲染完成
},
onShow:function(){
// 頁(yè)面顯示
},
onHide:function(){
// 頁(yè)面隱藏
},
onUnload:function(){
// 頁(yè)面關(guān)閉
}
})
相關(guān)文章:
hello WeApp icon組件
Window text組件 switch組件
tabBar底部導(dǎo)航 progress組件 action-sheet
應(yīng)用生命周期 button組件 modal組件
頁(yè)面生命周期 checkbox組件 toast組件
模塊化詳 form組件詳 loading 組件
數(shù)據(jù)綁定 input 組件 navigator 組件
View組件 picker組件 audio 組件
scroll-view組件 radio組件 video組件
swiper組件 slider組件 Image組件
相關(guān)文章
Canvas如何判斷點(diǎn)在形狀內(nèi)及內(nèi)置API性能詳解
這篇文章主要為大家介紹了Canvas如何判斷點(diǎn)在形狀內(nèi)及內(nèi)置API性能詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03
JS前端可擴(kuò)展的低代碼UI框架Sunmao使用詳解
這篇文章主要為大家介紹了JS前端可擴(kuò)展的低代碼UI框架Sunmao使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07
判斷Spartacus?SSR的Transfer?State是否正常工作技巧
這篇文章主要為大家介紹了判斷Spartacus?SSR的Transfer?State是否正常工作技巧,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
微信小程序滾動(dòng)Tab實(shí)現(xiàn)左右可滑動(dòng)切換
這篇文章主要介紹了微信小程序滾動(dòng)Tab實(shí)現(xiàn)左右可滑動(dòng)切換的相關(guān)資料,這里提供實(shí)現(xiàn)實(shí)例幫助大家實(shí)現(xiàn)這樣的功能,需要的朋友可以參考下2017-08-08
無(wú)UI?組件Headless框架邏輯原理用法示例詳解
這篇文章主要為大家介紹了無(wú)UI?組件Headless框架邏輯原理用法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10

