微信小程序滾動選擇器(時間日期)詳解及實例代碼

更新時間：2017年02月22日 10:34:23 投稿：lqh

這篇文章主要介紹了微信小程序滾動選擇器(時間日期)詳解及實例代碼的相關資料,需要的朋友可以參考下

微信小程序滾動選擇器(時間日期)詳解

微信小程序自己封裝了很多控件，用起來確實很方便，如果這是Android里面，還需要自己去定義，不廢話，效果圖：

這里寫圖片描述

一起來看看怎么實現(xiàn)的呢？看完你應該就該說，尼瑪，這就行啦….

這個效果呢，要用到picker組件，動畫從底部彈起的滾動選擇器，現(xiàn)支持三種選擇器，通過mode來區(qū)分，分別是普通選擇器，時間選擇器，日期選擇器，默認是普通選擇器。

看下相應的屬性：

這里寫圖片描述

具體的來看看代碼，布局:

<view class="section" > 
 <picker bindchange="bindPickerChange" value="{{index}}" range="{{objectArray}}" mode = "selector"> 
  <view class="picker"> 
   國家：{{objectArray[index]}} 
  </view> 
 </picker> 
</view> 

<view class="section"> 
 <picker mode="time" value="{{time}}" start="00:00" end="23:59" bindchange="bindTimeChange"> 
  <view class="picker"> 
   時間 : {{times}}
  </view> 
 </picker> 
</view> 
<view class="section"> 
 <picker mode="date" value="{{date}}" start="1978-01-01" end="2017-1-23" bindchange="bindDateChange"> 
  <view class="picker"> 
   日期: {{dates}} 
  </view> 
 </picker> 
</view>

css樣式:

.section{
  background:#CABBC7;
  margin:20rpx;
  padding:20rpx

}

js代碼：

Page({
 data: {
  dates: '2016-11-08',
  times: '12:00',
  objectArray: ['中國', '英國', '美國'],
  index: 0,
 },
 // 點擊時間組件確定事件 
 bindTimeChange: function (e) {
  console.log("誰哦按")
  this.setData({
   times: e.detail.value
  })
 },
 // 點擊日期組件確定事件 
 bindDateChange: function (e) {
   console.log(e.detail.value)
  this.setData({
   dates: e.detail.value
  })
 },
 // 點擊城市組件確定事件 
 bindPickerChange: function (e) {
   console.log(e.detail.value)
  this.setData({
   index: e.detail.value
  })
 }

代碼很簡單，分別綁定事件，點擊切換就Ok。

感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

您可能感興趣的文章:

MSSQL2000安全設置圖文教程
Sql server 2000下建立獨立帳號數(shù)據(jù)庫方法來實現(xiàn)安全設置，目的是為了就是黑客得到mssql的sa密碼，也只是低級的權限，不能進行超級管理員才有的權限。
2011-01-01
SQL入侵恢復xp_cmdshell方法總結
恢復xp_cmdshell SQL Server阻止了對組件 'xp_cmdshell' 的過程'sys.xp_cmdshell' 啟用
2010-08-08
mybatis的動態(tài)sql詳解（精）
MyBatis的動態(tài)SQL是基于OGNL表達式的，它可以幫助我們方便的在SQL語句中實現(xiàn)某些邏輯，本文詳解mybatis的動態(tài)sql，需要的朋友可以參考下
2015-08-08
SQL 復合查詢條件(AND,OR,NOT)對NULL值的處理方法
在SQL的3值邏輯下，一個查詢條件可以產生以下三種情況：TRUE,FALSE,NULL。只有那些滿足WHERE子句的值是TRUE的記錄才出現(xiàn)在結果表中。
2011-04-04
SQL?Server還原完整備份和差異備份的操作過程
這篇文章主要介紹了SQL?Server?還原?完整備份和差異備份的詳細操作，本文通過圖文并茂的形式給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2022-09-09
SQLServer存儲過程實現(xiàn)單條件分頁
本文主要介紹了SQLServer存儲過程實現(xiàn)單條件分頁的方法，具有很好的參考價值。下面跟著小編一起來看下吧
2017-03-03
SQL 中STUFF用法
這篇文章主要介紹了SQL 中STUFF用法,包括語法，參數(shù)等知識點，非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-11-11
通過備份記錄獲取數(shù)據(jù)庫的增長情況
通過備份記錄獲取數(shù)據(jù)庫的增長情況
2009-06-06
SQLServer地址搜索性能優(yōu)化
網上關于SQL優(yōu)化的教程很多,但是比較雜亂。今天我們來從一個簡單的例子來探討下SQLServer地址搜索性能優(yōu)化
2017-01-01
MySQL查詢兩個日期之間記錄的方法
本文主要介紹了MySQL查詢兩個日期之間的記錄的方法。具有很好的參考價值，下面跟著小編一起來看下吧
2017-03-03