微信小程式-picker元件地區,時間,日期選擇
阿新 • • 發佈:2019-02-10
效果
html程式碼
<view class="section"> <view class="section__title">省市區選擇器</view> <picker mode="region" bindchange="bindRegionChange" value="" custom-item=""> <view class="picker"> 當前選擇: <view wx:if="{{region}}">{{region[0]}},{{region[1]}},{{region[2]}}</view> </view> </picker> </view> <view class="section"> <view class="section__title">時間選擇器</view> <picker mode="time" value="" 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="" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange"> <view class="picker"> 當前選擇: {{date}} </view> </picker> </view>
css程式碼
.section{
padding: 20rpx;
border-bottom: 1px solid #aaaaaa;
}
js程式碼
意外金喜的部落格:http://blog.csdn.net/zzwwjjdj1Page({ data: { region: "", time: "", date: "" }, bindRegionChange(e) { let { value } = e.detail; console.log("地區改變:", value); this.setData({ region: value }) }, bindTimeChange(e) { let { value } = e.detail; console.log("時間改變:", value); this.setData({ time: value }) }, bindDateChange(e) { let { value } = e.detail; console.log("日期改變:", value); this.setData({ date: value }) }, });