這篇文章主要介紹了微信小程序 選擇器（時(shí)間，日期，地區(qū)）實(shí)例詳解的相關(guān)資料,這里提供了實(shí)例代碼及實(shí)現(xiàn)效果圖，幫助大家學(xué)習(xí)理解這部分知識(shí)，需要的朋友可以參考下
微信小程序 選擇器（時(shí)間，日期，地區(qū)）
微信小程序 開發(fā)由于本人最近學(xué)習(xí)微信小程序的開發(fā),根據(jù)自己的實(shí)踐結(jié)果整理了下結(jié)果，對(duì)日期選擇器，時(shí)間選擇器，地區(qū)選擇器做的實(shí)例,有不對(duì)的地方，希望大家指正。
用微信封裝好的控件感覺很好,為我們開發(fā)人員省去了很多麻煩.弊端就是不能做大量的自定義.今天試用了選擇器.
上gif:
上代碼:
1.index.js
//index.js
//獲取應(yīng)用實(shí)例
var app = getApp()
Page({
data: {
date: '2016-11-08',
time: '12:00',
array: ['中國(guó)', '巴西', '日本', '美國(guó)'],
index: 0,
},
onLoad: function () {
},
// 點(diǎn)擊時(shí)間組件確定事件
bindTimeChange: function (e) {
this.setData({
time: e.detail.value
})
},
// 點(diǎn)擊日期組件確定事件
bindDateChange: function (e) {
this.setData({
date: e.detail.value
})
},
// 點(diǎn)擊國(guó)家組件確定事件
bindPickerChange: function (e) {
this.setData({
index: e.detail.value
})
}
})
2.index.wxml
[html] view plain copy
<!--index.wxml-->
<view class="section" style="background:#787878;margin:20rpx;padding:20rpx">
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
<view class="picker">
國(guó)家：{{array[index]}}
</view>
</picker>
</view>
<view class="section" style="background:#787878;margin:20rpx;padding:20rpx">
<picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
<view class="picker">
時(shí)間 : {{time}}
</view>
</picker>
</view>
<view class="section" style="background:#787878;margin:20rpx;padding:20rpx">
<picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
<view class="picker">
日期: {{date}}
</view>
</picker>
</view>
①普通選擇器
選擇器用mode來區(qū)別,默認(rèn)是普通選擇器,e.detail.value拿到的值是選擇了項(xiàng)的索引index,再通過array拿到值.在data里面做初始化的時(shí)候,將備選項(xiàng)加入array即可.
選擇時(shí)觸發(fā)bindPickerChange事件,獲取index.
②時(shí)間選擇器
mode = time時(shí),是時(shí)間選擇器.start,end分別是有效時(shí)間范圍的開始和結(jié)束.格式hh:mm
選擇時(shí)觸發(fā)bindTimeChange事件,獲取time.
③日期選擇器
mode = date時(shí),是時(shí)間選擇器.start,end分別是有效日期范圍的開始和結(jié)束.格式y(tǒng)yyy-MM-dd
選擇時(shí)觸發(fā)bindDateChange事件,獲取date
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，更多相關(guān)內(nèi)容請(qǐng)關(guān)注PHP中文網(wǎng)！
相關(guān)推薦：
以上就是關(guān)于微信小程序的選擇器（時(shí)間，日期，地區(qū)）的解析的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注有卡有網(wǎng)。
