微信小程式 選擇器（時間，日期，地區）實例詳解

這篇文章主要介紹了微信小程式選擇器（時間，日期，地區）實例詳解的相關資料,這裡提供了實例程式碼及實現效果圖，幫助大家學習理解這部分知識，需要的朋友可以參考下

微信小程式選擇器（時間，日期，地區）

#         微信小程式 開發由於自己最近學習微信小程式的開發,根據自己的實踐結果整理了下結果，對日期選擇器，時間選擇器，地區選擇器做的實例,有不對的地方，希望大家指正。

用微信封裝好的控制項感覺很好,為我們開發人員省去了很多麻煩.弊端就是不能做大量的自訂.今天試用了選擇器.

#上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即可.

選擇時觸發bindPickerChange事件,獲取index.

②時間選擇器

mode = time時,是時間選擇器.start,end分別是有效時間範圍的開始和結束.格式hh:mm
選擇時觸發bindTimeChange事件,取得time.

③日期選擇器

mode = date時,是時間選擇器.start,end分別是有效日期範圍的開始與結束.格式yyyy-MM-dd
選擇時觸發bindDateChange事件,取得date

#

以上是微信小程式 選擇器（時間，日期，地區）實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！