Heim > Web-Frontend > js-Tutorial > Hauptteil

Einfaches Anwendungsbeispiel der WeChat-Applet-Auswahlkomponente

小云云
Freigeben: 2017-12-06 11:38:43
Original
3767 Leute haben es durchsucht

Picker Rolling Selector, unterstützt jetzt drei Selektoren, unterschieden nach Modus, nämlich gewöhnlicher Selektor (mode=selector), Zeitselektor ( mode=time) , Datumsauswahl (mode=date), die Standardeinstellung ist eine normale Auswahl.

In diesem Artikel stellen wir Ihnen ein einfaches Anwendungsbeispiel der WeChat-Applet-Auswahlkomponente vor.

Die spezifische Funktionsbeschreibung lautet wie folgt:

Normaler Selektor: Modus=Selektor


属性名 类型 默认值 说明
range Array [] mode为selector时,range有效
value Number 0 mode为selector时,是数字,表示选择了range中的第几个,从0开始。
bindchange EventHandle   value改变时触发change事件,event.detail= { value:value}

Zeitauswahl: mode=time


end
Attributname Typ Standardwert Beschreibung
Wert String td > gibt die ausgewählte Zeit an, das Format ist „
属性名 类型 默认值 说明
value String   表示选中的时间,格式为"hh:mm"
 start String   表示有效时间范围的开始,字符串格式为"hh:mm"
 end String   表示有效时间范围的结束,字符串格式为"hh:mm"
 bindchange EventHandle   value改变时触发change事件,event.detail= { value:value}
hh:mm

start String gibt den Beginn des gültigen Zeitbereichs an und das Zeichenfolgenformat ist „hh:mm
String gibt das Ende des gültigen Zeitbereichs an, das String-Format ist „hh:mm

"

bindchange EventHandle Das Änderungsereignis wird ausgelöst, wenn sich der Wert ändert , event.detail= { value :value}

Datumsauswahl: mode=date
属性名 类型 默认值 说明
value String 0 表示选中的日期,格式为"yyyy-MM-dd"
start String   表示有效日期范围的开始,字符串格式为"yyyy-MM-dd"
end String   表示有效日期范围的结束,字符串格式为"yyyy-MM-dd"
fields String day 有效值year,month,day,表示选择器的粒度
bindchange EventHandle   value改变时触发change事件,event.detail= { value:value}

Attributname Typ Standardwert Beschreibung
Wert String 0 stellt dar das ausgewählte Datum im Format „

jjjj-MM-tt

start String gibt das Datum des Inkrafttretens an. Der Anfang des Bereichs, das Zeichenfolgenformat ist „yyyy-MM-dd
<view class="section">
 <view class="section__title">地区选择器</view>
 <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
 <view class="picker">
  当前选择:{{array[index]}}
 </view>
 </picker>
</view>
<view class="section">
 <view class="section__title">时间选择器</view>
 <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
 <view class="picker">
  当前选择: {{time}}
 </view>
 </picker>
</view>
<view class="section">
 <view class="section__title">日期选择器</view>
 <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
 <view class="picker">
  当前选择: {{date}}
 </view>
 </picker>
</view>
Nach dem Login kopieren
end< /td>String Gibt das Ende des gültigen Datumsbereichs an, das String-Format ist „

jjjj-MM-tt

FelderStringTagGültige Werte sind Jahr, Monat und Tag und geben die Granularität an des Selektors
bindchangeEventHandle Das Änderungsereignis wird ausgelöst, wenn sich der Wert ändert. event.detail= { value:value}

Der Beispielcode lautet wie folgt:

picker. wxml:


Page({
 data: {
 array: [&#39;美国&#39;, &#39;中国&#39;, &#39;巴西&#39;, &#39;日本&#39;],
 index: 0,
 date: &#39;2016-09-01&#39;,
 time: &#39;12:01&#39;
 },
 bindPickerChange: function(e) {
 console.log(&#39;picker发送选择改变,携带值为&#39;, e.detail.value)
 this.setData({
  index: e.detail.value
 })
 },
 bindDateChange: function(e) {
 this.setData({
  date: e.detail.value
 })
 },
 bindTimeChange: function(e) {
 this.setData({
  time: e.detail.value
 })
 }
})
Nach dem Login kopieren


picker.js:


.section {
 display: flex;
 flex-direction: column;
 padding: 20rpx 0rpx;
 color: #333;
}
.section__title{
 font-size: 40rpx;
 margin: 10rpx 0rpx;
}
Nach dem Login kopieren


Einfache Stil-Layoutauswahl.wxss:

Betriebseffekt:

Der obige Inhalt ist ein einfaches Anwendungsbeispiel der WeChat-Applet-Auswahlkomponente. Ich hoffe, dass es allen helfen kann.

Verwandte Empfehlungen:

Picker-Scroll-SelektorDetaillierter Beispielcode für die WeChat-Applet-Picker-Ansichtskomponente WeChat-Applet-Auswahl für Datum und Uhrzeit

Das obige ist der detaillierte Inhalt vonEinfaches Anwendungsbeispiel der WeChat-Applet-Auswahlkomponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage