Detailed introduction of WeChat applet picker component-Mini Program Development-php.cn

Detailed introduction of WeChat applet picker component

高洛峰

Release： 2017-02-17 10:39:29

Original

2145 people have browsed it

This article mainly introduces relevant information about the detailed introduction of the WeChat applet picker component. Friends who need it can refer to it

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

The picker selector is divided into three types, ordinary Selectors, time selectors, and date selectors are distinguished by the mode attribute. The default is a normal selector. When testing, there is no response when clicking on the time and date. I don’t know if it’s a bug or something! I can’t test it on my phone and I don’t know what’s going on! !

Main attributes:

Normal selector

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

##Time selector

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

Date picker

微信小程序 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>

Copy after login

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(){
 // 页面关闭
 }
})

Copy after login

More articles related to the detailed introduction of the WeChat applet picker component Please pay attention to PHP Chinese website!