Exemple d'utilisation simple du composant de sélection d'applets WeChat-js tutoriel-php.cn

Exemple d'utilisation simple du composant de sélection d'applets WeChat

小云云

Libérer： 2017-12-06 11:38:43

original

3781 Les gens l'ont consulté

sélecteur roulant Picker, prend désormais en charge trois sélecteurs, distingués par mode, à savoir le sélecteur ordinaire (mode=selector), le sélecteur de temps ( mode=time) , sélecteur de date (mode=date), la valeur par défaut est un sélecteur normal.

Dans cet article, nous partagerons avec vous un exemple d'utilisation simple du composant de sélection d'applets WeChat.

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 d'heure : mode=time

end

Nom de l'attribut Tapez Valeur par défaut Description

valeur

Chaîne td >

indique l'heure sélectionnée, le format est "

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

hh:mm

début String représente le début de la plage de temps valide et le format de chaîne est "hh:mm"

String

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

bindchange EventHandle L'événement change 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}`

Nom de l'attribut	Type	Valeur par défaut	Description
valeur	Chaîne	0	représente la date sélectionnée au format " aaaa-MM-jj "
début	Chaîne		indique la date d'entrée en vigueur Le début de la plage, le format de chaîne 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> Copier après la connexion "
fin< /td>	Chaîne		Indique la fin de la plage de dates valide, le format de chaîne est " aaaa-MM-jj "
champs	Chaîne	jour	Les valeurs valides sont l'année, le mois et le jour, indiquant la granularité du sélecteur
bindchange	EventHandle		L'événement change est déclenché lorsque la valeur change, `event.detail= { value:value>`

L'exemple de code est le suivant :

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

Copier après la connexion

picker.js :

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

Copier après la connexion

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

Effet d'opération :

Le contenu ci-dessus est un exemple d'utilisation simple du composant de sélection d'applets WeChat. J'espère qu'il pourra être utilisé pour aider tout le monde.

Recommandations associées :

sélecteur de défilement du sélecteurExemple de code détaillé du composant d'affichage du sélecteur d'applet WeChat Sélecteur de date et d'heure du sélecteur d'applet WeChat

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!