小程序教程

微信小程序把玩（十八）picker组件

字号+ 作者： 来源： 2016-11-23 09:49 我要评论( )

picker选择器分为三种，普通选择器，时间选择器， 日期选择器 用mode属性区分，默认是普通选择器。测试时时间和日期点击无反应不知道是BUG还是啥！没法手机测试现在也不知道咋回事！！

主要属性：

普通选择器

时间选择器

日期选择器

wxml

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

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

  12. <view>日期选择器</view>
  13. <picker mode="date" value="{{date}}" start="2016-09-26" end="2017-10-10" bindchange="listenerDatePickerSelected">
  14.     <text>{{date}}</text>
  15. </picker>
复制代码

js

  1. Page({
  2.   data:{
  3.     // text:"这是一个页面"
  4.     array: ['Android', 'IOS', 'ReactNativ', 'WeChat', 'Web'],
  5.     index: 0,
  6.     time: '08:30',
  7.     date: '2016-09-26'
  8.   },

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

  20.   /**
  21.    * 监听时间picker选择器
  22.    */
  23.   listenerTimePickerSelected: function(e) {
  24.       //调用setData()重新绘制
  25.       this.setData({
  26.           time: e.detail.value,
  27.       });
  28.   },

  30.   /**
  31.    * 监听日期picker选择器
  32.    */
  33.   listenerDatePickerSelected:function(e) {
  34.     this.setDate({
  35.       date: e.detail.value
  36.     })
  37.   },

  39.   onLoad:function(options){
  40.     // 页面初始化 options为页面跳转所带来的参数
  41.   },
  42.   onReady:function(){
  43.     // 页面渲染完成
  44.   },
  45.   onShow:function(){
  46.     // 页面显示
  47.   },
  48.   onHide:function(){
  49.     // 页面隐藏
  50.   },
  51.   onUnload:function(){
  52.     // 页面关闭
  53.   }
  54. })
复制代码


　

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 微信小程序 轮播图 swiper图片组件

    微信小程序 轮播图 swiper图片组件

    2016-11-23 09:49

  • 微信小程序 开发 微信开发者工具 快捷键

    微信小程序 开发 微信开发者工具 快捷键

    2016-11-23 09:49

  • 微信小程序 页面跳转 传递参数

    微信小程序 页面跳转 传递参数

    2016-11-23 09:49

  • 微信小程序 如何获取时间

    微信小程序 如何获取时间

    2016-11-23 09:49

网友点评
精彩导读
2-HelloWorld微信小程序

2-HelloWorld微信小程序

微信小程序 轮播图 swiper图片组件

微信小程序 轮播图 swiper图片组件

微信小程序开发记账应用实战服务端之用户注册与登录

微信小程序开发记账应用实战服务端之用户注册

微信小程序倒计时组件

微信小程序倒计时组件

微信小程序实现购物车页面

微信小程序实现购物车页面

热门资讯
Copyright © 2006-2018 www.h5cn.com.H5之家 版权所有 Power by h5cn 备案： 黔ICP备15004751-2
HTML5入门 HTML5技术 canvas教程 专题学习