關於微信小程式的選擇器(時間,日期,地區)的解析

不言
發布: 2018-06-26 15:48:04
原創
3042 人瀏覽過

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

微信小程式選擇器(時間,日期,地區)

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

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

#上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
 
 
  
   
   国家:{{array[index]}} 
   
  
 
 
 
  
   
   时间 : {{time}} 
   
  
 
 
  
   
   日期: {{date}} 
   
  
登入後複製

①普通選擇器

#選擇器用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中文網!

相關推薦:

微信小程式跳轉傳遞資料的方法

微信小程式setData的使用方法

微信小程式日期時間選擇器的使用方法

以上是關於微信小程式的選擇器(時間,日期,地區)的解析的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!