微信小程序 滾動選擇器(時間日期)詳解及實例代碼
發(fā)布日期：2021-12-15 07:49 | 文章來源：CSDN
微信小程序 滾動選擇器(時間日期)詳解
微信小程序自己封裝了很多控件，用起來確實很方便，如果這是Android里面，還需要自己去定義，不廢話，效果圖：
一起來看看怎么實現(xiàn)的呢？看完你應(yīng)該就該說，尼瑪，這就行啦….
這個效果呢，要用到picker組件，動畫從底部彈起的滾動選擇器，現(xiàn)支持三種選擇器，通過mode來區(qū)分，分別是普通選擇器，時間選擇器，日期選擇器，默認(rèn)是普通選擇器。
看下相應(yīng)的屬性：
具體的來看看代碼，布局:
<view class="section" >
<picker bindchange="bindPickerChange" value="{{index}}" range="{{objectArray}}" mode = "selector">
<view class="picker">
國家：{{objectArray[index]}}
</view>
</picker>
</view>
<view class="section">
<picker mode="time" value="{{time}}" start="00:00" end="23:59" bindchange="bindTimeChange">
<view class="picker">
時間 : {{times}}
</view>
</picker>
</view>
<view class="section">
<picker mode="date" value="{{date}}" start="1978-01-01" end="2017-1-23" bindchange="bindDateChange">
<view class="picker">
日期: {{dates}}
</view>
</picker>
</view>
css樣式:
.section{
background:#CABBC7;
margin:20rpx;
padding:20rpx
}
js代碼：
Page({
data: {
dates: '2016-11-08',
times: '12:00',
objectArray: ['中國', '英國', '美國'],
index: 0,
},
// 點擊時間組件確定事件
bindTimeChange: function (e) {
console.log("誰哦按")
this.setData({
times: e.detail.value
})
},
// 點擊日期組件確定事件
bindDateChange: function (e) {
console.log(e.detail.value)
this.setData({
dates: e.detail.value
})
},
// 點擊城市組件確定事件
bindPickerChange: function (e) {
console.log(e.detail.value)
this.setData({
index: e.detail.value
})
}
代碼很簡單，分別綁定事件，點擊切換就Ok。
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
版權(quán)聲明：本站文章來源標(biāo)注為YINGSOO的內(nèi)容版權(quán)均為本站所有，歡迎引用、轉(zhuǎn)載，請保持原文完整并注明來源及原文鏈接。禁止復(fù)制或仿造本網(wǎng)站，禁止在非www.sddonglingsh.com所屬的服務(wù)器上建立鏡像，否則將依法追究法律責(zé)任。本站部分內(nèi)容來源于網(wǎng)友推薦、互聯(lián)網(wǎng)收集整理而來，僅供學(xué)習(xí)參考，不代表本站立場，如有內(nèi)容涉嫌侵權(quán)，請聯(lián)系alex-e#qq.com處理。
相關(guān)文章
關(guān)注官方微信