Explication détaillée des exemples de sélecteur d'applet WeChat (heure, date, région)

Cet article présente principalement les informations pertinentes sur l'explication détaillée de l'exemple de sélecteur d'applet WeChat (heure, date, région). L'exemple de code et les rendus d'implémentation sont fournis ici pour aider tout le monde à apprendre et à comprendre cette partie des connaissances dans Friends. besoin peut s'y référer. Suivant

Sélecteur d'applet WeChat (heure, date, région)

Développement d'applet WeChat Depuis, j'ai récemment appris le développement d'applet WeChat, basé sur sur mes propres résultats de pratique, j'ai trié les résultats et trouvé quelques exemples de sélecteur de date, de sélecteur d'heure et de sélecteur de région. S'il y a des erreurs, j'espère que vous pourrez les corriger.

Les contrôles emballés dans les enveloppes WeChat sont très agréables et nous évitent bien des ennuis aux développeurs. L'inconvénient est que nous ne pouvons pas faire beaucoup de personnalisation.

Télécharger le gif :

Télécharger le code :

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>

①Sélecteur ordinaire

Le sélecteur se distingue par mode. La valeur par défaut est le sélecteur ordinaire, e.detail. .La valeur obtenue par value est l'index de l'élément sélectionné, puis la valeur est obtenue via le tableau. Lors de l'initialisation des données, ajoutez simplement l'élément alternatif au tableau

Le bindPickerChange. l'événement est déclenché lors de la sélection, obtenez l'index.

②Sélecteur d'heure

Lorsque mode = heure, c'est le sélecteur d'heure de début et de fin qui est le début. et fin de la plage de temps valide respectivement. End Format hh: mm

déclenche l'événement bindTimeChange lorsqu'il est sélectionné et obtient l'heure

③Date picker
<.>mode = date, c'est l'heure Selector.start et end sont respectivement le début et la fin de la plage de dates valide L'événement bindDateChange est déclenché lorsque le format aaaa-MM-jj

est sélectionné, et la date<.> est obtenu.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!