Heim >WeChat-Applet >Mini-Programmentwicklung >Detaillierte Erläuterung der Beispiele für die WeChat-Applet-Auswahl (Uhrzeit, Datum, Region).

Detaillierte Erläuterung der Beispiele für die WeChat-Applet-Auswahl (Uhrzeit, Datum, Region).

巴扎黑
巴扎黑Original
2017-04-01 15:55:202596Durchsuche

In diesem Artikel werden hauptsächlich relevante Informationen zur detaillierten Erläuterung des WeChat-Applet-Selektors (Uhrzeit, Datum, Region) vorgestellt, um allen Freunden das Erlernen und Verstehen dieses Teils zu erleichtern Bedürftige können darauf verweisen.

WeChat-Applet-Auswahl (Zeit, Datum, Region)

WeChat-Applet-Entwicklung Da ich kürzlich die Entwicklung des WeChat-Applets erfahren habe, Basierend auf meinen eigenen Übungsergebnissen habe ich die Ergebnisse sortiert und einige Beispiele für die Datumsauswahl, Zeitauswahl und Regionsauswahl gefunden. Wenn es Fehler gibt, hoffe ich, dass Sie mich korrigieren können.

Die in WeChat-Umschlägen verpackten Steuerelemente fühlen sich sehr gut an und ersparen uns Entwicklern viel Ärger. Der Nachteil ist, dass wir heute nicht viele Anpassungen vornehmen können.

Gif hochladen:

Code hochladen:

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>

①Gewöhnlicher Selektor

Der Selektor wird nach Modus unterschieden. Der Standardwert ist der gewöhnliche Selektor, e.detail . Der durch value erhaltene Wert ist der Index des ausgewählten Elements, und dann wird der Wert durch das Array erhalten. Fügen Sie beim Initialisieren der Daten einfach das alternative Element zum Array hinzu wird ausgelöst, wenn ausgewählt wird, den Index abrufen.

②Zeitauswahl

Wenn Modus = Zeit, sind Start und Ende die Start- und Endzeit Ende des gültigen Zeitbereichs. Format hh: mm
löst bei Auswahl das bindTimeChange-Ereignis aus und ruft die Uhrzeit ab


Modus = Datum, es ist die Zeit. Selector.start und end sind der Anfang bzw. das Ende des gültigen Datumsbereichs. Das bindDateChange-Ereignis wird ausgelöst, wenn das Format jjjj-MM-tt

ausgewählt wird und das Datum wird erhalten.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Beispiele für die WeChat-Applet-Auswahl (Uhrzeit, Datum, Region).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn