Maison  >  Article  >  Applet WeChat  >  Utilisation simple du composant de sélection dans l'applet WeChat

Utilisation simple du composant de sélection dans l'applet WeChat

不言
不言original
2018-06-23 16:16:0213192parcourir

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

tr>

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 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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn