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