Utilisation simple du composant de sélection dans l'applet 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. Apprenez à utiliser simplement le 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

< td>

L'exemple de code est le suivant :

picker.wxml :

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

picker.js :

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

Sélecteur de mise en page de style simple :

Effet de course :

Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il vous sera utile. L'apprentissage de tout le monde est utile. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois ! Recommandations associées :

Introduction à l'utilisation du composant de bouton de l'applet WeChat

L'applet WeChat implémente le réglage dynamique de l'invite d'espace réservé texte Et la méthode de sélection des boutons/état d'annulation

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 "
start td>	String		représente le début de la plage de dates valide, le format de chaîne est "aaaa-MM- dd <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> "
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< /td>	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!