Analyse du sélecteur (heure, date, région) de l'applet WeChat

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 le besoin peuvent s'y référer. Suivant

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

Développement d'applet WeChat Depuis que j'ai récemment appris le développement de l'applet WeChat, sur la base de mes propres résultats pratiques, 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 normal

Le sélecteur se distingue par le mode. e La valeur obtenue par .detail.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'alternative au tableau

Quand. en sélectionnant Déclenchez l'événement bindPickerChange et 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 valide. plages de temps respectivement. Le format hh:mm

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

③Sélecteur de date

mode = date , est un sélecteur d'heure, le début et la fin 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 complet de l'article, j'espère qu'il sera utile à l'apprentissage de tout le monde. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment accéder et transférer des données dans l'applet WeChat

Comment utiliser setData dans l'applet WeChat

Comment utiliser setData dans l'applet WeChat

Comment utiliser le sélecteur de date et d'heure de l'applet WeChat

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!