Exemple de code détaillé du composant de sélection d'applets WeChat

Cet article présente principalement l'explication détaillée et des exemples simples du composant de sélection d'applets WeChat. Les amis dans le besoin peuvent se référer aux

rendus d'implémentation :

Sélecteur d'applet WeChat

Sélecteur de défilement, prend désormais en charge trois sélecteurs, distingués par mode, qui sont des sélecteurs ordinaires,

sélecteur d'heure, Sélecteur de date , la valeur par défaut est le sélecteur ordinaire

Sélecteur ordinaire : mode=selector

Nom de l'attribut

Type

Valeur par défaut

Description

range

Array

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

[]

Lorsque le mode est sélecteur, la plage est valide

value

Numéro

0

Lorsque le mode est sélecteur, il s'agit d'un nombre, indiquant quel nombre dans la plage est sélectionné, à partir de 0.

bindchange

EventHandle

L'événement change est déclenché lorsque la valeur change, event.detail = { value :value}

Sélecteur d'heure : mode=heure

thead>

Nom de l'attribut

Type

Valeur par défaut

Description

valeur

Chaîne

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

td>

Indique l'heure sélectionnée, le format est "hh:mm"

Chaîne

représente le début de la plage horaire valide, String

format "hh:mm"

Chaîne

représente la fin du plage de temps valide, caractères Le format de chaîne est "hh:mm"

EventHandle

L'événement de changement est déclenché lorsque la valeur change, event.detail= { value:value>

Sélecteur de date : 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}

Description tr>

Nom de l'attribut	Type	Valeur par défaut
valeur	Chaîne	0	représente le date sélectionnée au format "aaaa-MM-jj"
début	Chaîne		représente le début de la plage de dates valide, une chaîne Le format est "aaaa-MM-jj"
end	String		représente la fin de la plage de dates valide, le format de chaîne est "aaaa-MM-jj"
champs	Chaîne	jour	Valeurs valides sont l'année, le mois et le jour, indiquant la granularité du sélecteur
bindchange	EventHandle		L'événement de changement est déclenché lorsque la valeur change, event.detail= { value:value}

Exemple de code :

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

Merci d'avoir lu, j'espère que cela pourra vous aider, merci pour votre soutien à ce site !

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!