Detaillierter Beispielcode für die WeChat-Applet-Auswahlkomponente

Dieser Artikel stellt hauptsächlich die detaillierte Erklärung und einfache Beispiele der WeChat-Applet-Auswahlkomponente vor. Freunde in Not können sich auf die

Implementierungsdarstellungen beziehen:

WeChat-Applet-Auswahl

Scroll-Selektor, unterstützt jetzt drei Selektoren, unterschieden nach Modus, bei denen es sich um gewöhnliche Selektoren handelt: Zeitselektor, Datumsselektor , der Standardwert ist der gewöhnliche Selektor

Gewöhnlicher Selektor: mode=selector

Attributname

Typ

Standardwert

Beschreibung

range

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

Array

[]

Wenn der Modus Selektor ist, ist der Bereich gültig

Wert

Zahl

0

Wenn der Modus „Selektor“ ist, handelt es sich um eine Zahl, die angibt, welche Zahl im Bereich ausgewählt ist, beginnend bei 0.

bindchange

EventHandle

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

Zeitauswahl: mode=time

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

thead>

Attributname	Typ	Standardwert	Beschreibung
value	String td>		Gibt die ausgewählte Zeit an, das Format ist „hh:mm“
	String		stellt den Anfang des gültigen Zeitbereichs dar, String Format „hh:mm“
	String		stellt das Ende dar Gültiger Zeitbereich, Zeichen Das Zeichenfolgenformat ist „hh:mm“
	EventHandle		Das Änderungsereignis wird ausgelöst, wenn sich der Wert ändert, event.detail= { value:value}

Date picker: 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}

Beschreibung tr>

Attributname	Typ	Standardwert
Wert	String	0	stellt dar ausgewähltes Datum im Format „JJJJ-MM-TT“
Start	String		stellt den Beginn des gültigen Datumsbereichs dar, eine Zeichenfolge. Das Format ist „jjjj-MM-tt“
end	String		stellt das Ende des gültigen Datumsbereichs dar, das String-Format ist „JJJJ-MM-TT“
Felder	String	Tag	Gültige Werte sind Jahr, Monat und Tag und geben die Granularität des Selektors an
bindchange	EventHandle		Das Änderungsereignis wird ausgelöst, wenn sich der Wert ändert, event.detail= { value:value}

Beispielcode:

<view class="section">
 <view class="sectiontitle">地区选择器</view>
 <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
 <view class="picker">
  当前选择：{{array[index]}}
 </view>
 </picker>
</view>
<view class="section">
 <view class="sectiontitle">时间选择器</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="sectiontitle">日期选择器</view>
 <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
 <view class="picker">
  当前选择: {{date}}
 </view>
 </picker>
</view>

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.time
 })
 }
})

Vielen Dank fürs Lesen, ich hoffe, es kann Ihnen helfen, vielen Dank für Ihre Unterstützung dieser Website!

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