您好,登錄后才能下訂單哦!
這篇文章主要介紹picker日期和時(shí)間選擇器的示例分析,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
分三種樣式:
默認(rèn)的自己可以定義數(shù)據(jù)的
mode="time"是時(shí)間選擇器
mode="date"是日期選擇器
跟其他的一樣先來(lái)看下picker.wxml
<view class="page"> <view class="page__hd"> <text class="page__title">picker</text> <text class="page__desc">選擇器</text> </view> <view class="page__bd"> <view class="section"> <view class="section__title">地區(qū)選擇器</view> <picker bindchange="bindPickerChange" value="pw_index" range="pw_array"> <view class="picker"> 當(dāng)前選擇:pw_array[index] </view> </picker> </view> <view class="section"> <view class="section__title">時(shí)間選擇器</view> <picker mode="time" value="pw_time" start="09:01" end="21:01" bindchange="bindTimeChange"> <view class="picker"> 當(dāng)前選擇: pw_time </view> </picker> </view> <view class="section"> <view class="section__title">日期選擇器</view> <picker mode="date" value="pw_date" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange"> <view class="picker"> 當(dāng)前選擇: pw_date </view> </picker> </view> </view> </view>
picker.wxss
page { background-color: #fbf9fe; height: 100%; } .page__hd{ padding: 50rpx 50rpx 100rpx 50rpx; text-align: center; } .page__title{ display: inline-block; padding: 20rpx 40rpx; font-size: 32rpx; color: #AAAAAA; border-bottom: 1px solid #CCCCCC; } .page__desc{ display: none; margin-top: 20rpx; font-size: 26rpx; color: #BBBBBB; } .section{ margin-bottom: 80rpx; } .section__title{ margin-bottom: 16rpx; padding-left: 30rpx; padding-right: 30rpx; } .picker{ padding: 26rpx; background-color: #FFFFFF; }
picker.js
Page({ data: { array: ['中國(guó)', '美國(guó)', '巴西', '日本'], index: 0, date: '2016-09-01', time: '12:01' }, bindPickerChange: function(e) { console.log('picker發(fā)送選擇改變,攜帶值為', 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.value }) } })
demo地址 :WeAppDemo_jb51.rar
下面是頁(yè)面展示
三種樣式圖:
1. 默認(rèn)的自己可以定義數(shù)據(jù)的
2. mode="time"是時(shí)間選擇器
3. mode="date"是日期選擇器
以上是“picker日期和時(shí)間選擇器的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。