Einfache Verwendung der Picker-Komponente im WeChat-Applet

In diesem Artikel wird hauptsächlich die einfache Verwendung der Picker-Komponente des WeChat-Applets vorgestellt. Er analysiert detailliert die Funktion, Verwendung und die damit verbundenen Vorsichtsmaßnahmen in Form von Beispielen >

Die Beispiele in diesem Artikel beschreiben die einfache Verwendung der WeChat-Applet-Auswahlkomponente. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Picker-Rolling-Selektor, unterstützt jetzt drei Selektoren, unterschieden nach Modus, bei denen es sich um gewöhnliche Selektoren (

mode=selector) und Zeit handelt Auswahl (mode=time), Datumsauswahl (mode=date), die Standardeinstellung ist eine normale Auswahl.

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}

Zeitselektor: Modus=Zeit

Attributname

Typ

Standardwert

Beschreibung

value

String

repräsentiert die ausgewählte Zeit, die Das Format ist „hh:mm

属性名	类型	默认值	说明
value	String		表示选中的时间，格式为"hh:mm"
start	String		表示有效时间范围的开始，字符串格式为"hh:mm"
end	String		表示有效时间范围的结束，字符串格式为"hh:mm"
bindchange	EventHandle		value改变时触发change事件，event.detail= { value:value}

“

start

String

bedeutet gültig Der Anfang des Zeitbereichs, das Zeichenfolgenformat ist „

hh:mm“

end

String

Gibt das Ende des gültigen Zeitbereichs an, das Zeichenfolgenformat ist „hh:mm“

bindchange

EventHandle

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

属性名	类型	默认值	说明
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}

Datumsauswahl: mode=date

tr>

Attribut Name	Typ	Standardwert	Beschreibung
Wert td>	String td>	0	stellt das ausgewählte Datum dar, das Format ist „jjjj-MM-tt “
start td>	String		stellt den Anfang des gültigen Datumsbereichs dar, das String-Format ist „yyyy-MM- dd "
end	String		stellt das Ende des gültigen Datumsbereichs dar , das Zeichenfolgenformat ist „yyyy-MM-dd “
fields	String	day	Gültige Werte Jahr, Monat, Tag, die die Granularität des Selektors angeben
bindchange	EventHandle	Das Änderungsereignis wird ausgelöst, wenn sich der Wert event.detail= { value:value}

ändert >Der Beispielcode lautet wie folgt:

picker.wxml:

<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>

picker.js:

Page({
 data: {
 array: ['美国', '中国', '巴西', '日本'],
 index: 0,
 date: '2016-09-01',
 time: '12:01'
 },
 bindPickerChange: function(e) {
 console.log('picker发送选择改变，携带值为', 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
 })
 }
})

Einfache Stil-Layout-Auswahl.wxss:

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

Betriebseffekt:

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website! Verwandte Empfehlungen:

Einführung in die Verwendung der WeChat-Applet-Schaltflächenkomponente

Das WeChat-Applet implementiert die dynamische Einstellung der Platzhalteraufforderung Text Und die Methode zur Schaltflächenauswahl/Abbruchstatus

Das obige ist der detaillierte Inhalt vonEinfache Verwendung der Picker-Komponente im WeChat-Applet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!