這篇文章主要介紹了微信小程式選擇器（時間，日期，地區）實例詳解的相關資料,這裡提供了實例程式碼及實現效果圖，幫助大家學習理解這部分知識，需要的朋友可以參考下
微信小程式選擇器（時間，日期，地區）
# 微信小程式 開發由於自己最近學習微信小程式的開發,根據自己的實踐結果整理了下結果，對日期選擇器，時間選擇器，地區選擇器做的實例,有不對的地方，希望大家指正。
用微信封裝好的控制項感覺很好,為我們開發人員省去了很多麻煩.弊端就是不能做大量的自訂.今天試用了選擇器.
#上gif:
上程式碼:
#1.index.js
//index.js
//获取应用实例
var app = getApp()
Page({
data: {
date: '2016-11-08',
time: '12:00',
array: ['中国', '巴西', '日本', '美国'],
index: 0,
},
onLoad: function () {
},
// 点击时间组件确定事件
bindTimeChange: function (e) {
this.setData({
time: e.detail.value
})
},
// 点击日期组件确定事件
bindDateChange: function (e) {
this.setData({
date: e.detail.value
})
},
// 点击国家组件确定事件
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">
国家：{{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">
时间 : {{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來區別,預設是普通選擇器,e.detail .value拿到的值是選擇了項目的索引index,再透過array拿到值.在data裡面做初始化的時候,將備選項加入array即可.
②時間選擇器
選擇時觸發bindTimeChange事件,獲取time.
#③日期選擇器
選擇時觸發bindDateChange事件,取得date
以上是關於微信小程式的選擇器（時間，日期，地區）的解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！
