Comment utiliser le composant sélecteur dans le mini-programme WeChat

Cet article présente principalement l'utilisation simple du composant picker de l'applet WeChat. Il analyse en détail la fonction, l'utilisation et les précautions associées du composant picker sous forme d'exemples. Les amis dans le besoin peuvent se référer à ce qui suit

Les exemples de cet article sont décrits. J'ai appris l'utilisation simple du composant de sélection d'applets WeChat. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

sélecteur roulant du sélecteur, prend désormais en charge trois sélecteurs, distingués par mode, qui sont des sélecteurs ordinaires (

mode=selector), Temps sélecteur (mode=time), sélecteur de date (mode=date), la valeur par défaut est un sélecteur normal.

La description spécifique de la fonction est la suivante :

Sélecteur normal : mode=selector

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

Sélecteur de temps : mode=time

Nom de l'attribut

Type

Valeur par défaut

Description

value

String

représente l'heure sélectionnée, la le format est "hh:mm

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

"

start

Chaîne

signifie valide Le début de la plage horaire, le format de chaîne est "

hh:mm"

end

Chaîne

Indique la fin de la plage horaire valide, le format de chaîne est "hh:mm"

bindchange

EventHandle

L'événement de changement est déclenché lorsque la valeur change, 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}

Sélecteur de date : mode=date

tr>L'exemple de code est le suivant :

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

picker.wxml :

picker.js :

Sélecteur de mise en page de style simple.wxss :

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère qu'il sera utile à tout le monde à l'avenir. Utile.

Articles associés :

Comment utiliser le composant Vue.use() via la méthode globale

À propos de la création de constantes en JavaScript (tutoriel détaillé )

Comment fermer la page Web et afficher l'invite de congé dans js (tutoriel détaillé)

Problèmes concernant le point-virgule suivant dans les instructions JavaScriptComment prévisualiser les images à l'aide de wx.previewImage dans le mini-programme WeChat

Attribut nom	Type	Valeur par défaut	Description
valeur td>	Chaîne td>	0	représente la date sélectionnée, le format est "aaaa-MM-jj <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> "
start td>	String		représente le début de la plage de dates valide, le format de chaîne est " aaaa-MM- dd "
end	String		représente la fin de la plage de dates valide , le format de chaîne est " 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 }) } }) aaaa-MM-jj "
champs	Chaîne	jour	Valeurs valides année, mois, jour, indiquant la granularité du sélecteur
bindchange	EventHandle	L'événement change est déclenché lorsque la valeur change event.detail= { value:value>

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!