微信小程式weui線上入門教程-WeUi操作反饋-picker選擇器
阿新 • • 發佈:2019-01-14
單列選擇器
時間選擇器
日期選擇器
js程式碼
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.value }) },
wxml程式碼
<view class="page"> <view class="page__hd"> <view class="page__title">Picker</view> <view class="page__desc">選擇器,這裡使用小程式原生的picker。</view> </view> <view class="page__bd"> <view class="weui-btn-area"> <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}"> <button type="default">單列選擇器</button> </picker> <picker class="weui-btn" mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange"> <button type="default">時間選擇器</button> </picker> <picker class="weui-btn" mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange"> <button type="default">日期選擇器</button> </picker> </view> </view> </view>