Introduction détaillée du composant de sélection d'applets WeChat-Développement de mini-programmes-php.cn

Introduction détaillée du composant de sélection d'applets WeChat

高洛峰

Libérer： 2017-02-17 10:39:29

original

2150 Les gens l'ont consulté

Cet article présente principalement des informations pertinentes sur l'introduction détaillée du composant de sélection d'applets WeChat. Les amis qui en ont besoin peuvent s'y référer

微信小程序 picker组件详细介绍

Le sélecteur de sélecteur est divisé en trois. Les types, les sélecteurs ordinaires, les sélecteurs d'heure et les sélecteurs de date se distinguent par l'attribut mode. La valeur par défaut est un sélecteur normal. Lors des tests, il n'y a pas de réponse en cliquant sur l'heure et la date, je ne sais pas si c'est un bug ou autre ! Je ne peux pas le tester sur mon téléphone et je ne sais pas ce qui se passe ! !

Attributs principaux :

Sélecteur normal

微信小程序 picker组件详细介绍

Sélecteur de temps

微信小程序 picker组件详细介绍

Sélecteur de date

微信小程序 picker组件详细介绍

wxml

<view>普通选择器</view>
<!--mode默认selector range数据源value选择的index bindchange事件监听-->
<picker mode="selector" range="{{array}}" value="{{index}}" bindchange="listenerPickerSelected">
 <text>{{array[index]}}</text>
</picker>

<view>时间选择器</view>
<picker mode="time" value="{{time}}" start="06:00" end="24:00" bindchange="listenerTimePickerSelected">
 <text>{{time}}</text>
</picker>

<view>日期选择器</view>
<picker mode="date" value="{{date}}" start="2016-09-26" end="2017-10-10" bindchange="listenerDatePickerSelected">
 <text>{{date}}</text>
</picker>

Copier après la connexion

Page({
 data:{
 // text:"这是一个页面"
 array: [&#39;Android&#39;, &#39;IOS&#39;, &#39;ReactNativ&#39;, &#39;WeChat&#39;, &#39;Web&#39;],
 index: 0,
 time: &#39;08:30&#39;,
 date: &#39;2016-09-26&#39;
 },

 /**
 * 监听普通picker选择器
 */
 listenerPickerSelected: function(e) {
  //改变index值，通过setData()方法重绘界面
  this.setData({
  index: e.detail.value
  });
 }, 

 /**
 * 监听时间picker选择器
 */
 listenerTimePickerSelected: function(e) {
  //调用setData()重新绘制
  this.setData({
   time: e.detail.value,
  });
 },

 /**
 * 监听日期picker选择器
 */
 listenerDatePickerSelected:function(e) {
 this.setDate({
  date: e.detail.value
 })
 },

 onLoad:function(options){
 // 页面初始化 options为页面跳转所带来的参数
 },
 onReady:function(){
 // 页面渲染完成
 },
 onShow:function(){
 // 页面显示
 },
 onHide:function(){
 // 页面隐藏
 },
 onUnload:function(){
 // 页面关闭
 }
})

Copier après la connexion

Plus de composants du sélecteur d'applets WeChat Pour une introduction détaillée aux éléments connexes articles, veuillez faire attention au site Web PHP chinois !