微信小程序把玩(十八)picker组件
博客专区 > Mr韦淋 的博客 > 博客详情
微信小程序把玩(十八)picker组件
Mr韦淋 发表于7个月前
微信小程序把玩(十八)picker组件
  • 发表于 7个月前
  • 阅读 3
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

这里写图片描述

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

主要属性:

普通选择器

这里写图片描述

时间选择器

这里写图片描述

日期选择器

这里写图片描述

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> 

js

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

  /** * 监听普通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(){
    // 页面关闭
  }
})
共有 人打赏支持
粉丝 3
博文 80
码字总数 23114
×
Mr韦淋
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: