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

为什么80%的码农都做不了架构师？>>>

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>

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

转载于:https://my.oschina.net/hzdx/blog/894400

微信小程序把玩（十八）picker组件相关推荐

微信小程序多项选择器_微信小程序——多列选择器picker组件
一.效果图二.picker属性一个简单地多列选择器只要给picker组件加属性mode="multiSelector"即可,绑定数据时使用range来绑定一个数组作为显示内容, ...
微信小程序把玩（二十八）image组件
原文:微信小程序把玩(二十八)image组件 image组件也是一个程序不可缺少的,可以这样说一个app中image组件随处可以看到,一般 image有两种加载方式第一种是网络图片第二种是本地图片资源 ...
微信小程序把玩（十九）radio组件
原文:微信小程序把玩(十九)radio组件 radio组件为单选组件与radio-group组合使用,使用方式和checkbox没啥区别主要属性: wxml <!--设置监听器,当点击radi ...
微信小程序把玩（二十六）navigator组件
微信小程序把玩(二十六)navigator组件原文:微信小程序把玩(二十六)navigator组件 navigator跳转分为两个状态一种是关闭当前页面一种是不关闭当前页面.用redirect属性指 ...
微信小程序把玩（三十五）Video API
原文:微信小程序把玩(三十五)Video API 电脑端不能测试拍摄功能只能测试选择视频功能,好像只支持mp4格式,值得注意的是成功之后返回的临时文件路径是个列表tempFilePaths而不是tem ...
微信小程序把玩（四十）animation API
原文:微信小程序把玩(四十)animation API 动画水还是比较深的,这里只是简单介绍下小程序中动画的一些属性和注意事项,做动画前一定要整理好思路将动画一步步分解,再进行组合!这里只做引入. w ...
微信小程序把玩（二十七）audio组件
微信小程序把玩(二十七)audio组件原文:微信小程序把玩(二十七)audio组件音频播放已经封装的很好!只需配合属性设置即可! (method和data配合使用) 主要属性: wxml < ...
微信小程序把玩（三十二）Image API
原文:微信小程序把玩(三十二)Image API 选择图片时可设置图片是否是原图,图片来源.这用的也挺常见的,比如个人中心中设置头像,可以与wx.upLoadFile()API使用主要方法: wx. ...
微信小程序开发(十)小程序支付-查询退款
应用场景提交退款申请后,通过调用该接口查询退款状态.退款有一定延时,用零钱支付的退款20分钟内到账,银行卡支付的退款3个工作日后重新查询退款状态. 接口说明这里退款还是根据商户订单号-out_tr ...
《微信小程序-进阶篇》Lin-ui组件库源码分析-列表组件List（一）
大家好,这是小程序系列的第二十篇文章,在这一个阶段,我们的目标是由简单入手,逐渐的可以较为深入的了解组件化开发,从本文开始,将记录分享lin-ui的源码分析,期望通过对lin-ui源码的学习能加深组 ...

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

微信小程序把玩（十八）picker组件相关推荐

最新文章

热门文章