微信小程序picker组件简单用法示例【附demo源码下载】


Posted in Javascript onDecember 05, 2017

本文实例讲述了微信小程序picker组件简单用法。分享给大家供大家参考,具体如下:

picker滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器(mode=selector),时间选择器(mode=time),日期选择器(mode=date),默认是普通选择器。

具体功能说明如下:

普通选择器:mode=selector

属性名 类型 默认值 说明
range Array [] mode为selector时,range有效
value Number 0 mode为selector时,是数字,表示选择了range中的第几个,从0开始。
bindchange EventHandle   value改变时触发change事件,event.detail= { value:value}

时间选择器:mode=time

属性名 类型 默认值 说明
value String   表示选中的时间,格式为"hh:mm"
 start String   表示有效时间范围的开始,字符串格式为"hh:mm"
 end String   表示有效时间范围的结束,字符串格式为"hh:mm"
 bindchange EventHandle   value改变时触发change事件,event.detail= { value:value}

日期选择器:mode=date

属性名 类型 默认值 说明
value String 0 表示选中的日期,格式为"yyyy-MM-dd"
start String   表示有效日期范围的开始,字符串格式为"yyyy-MM-dd"
end String   表示有效日期范围的结束,字符串格式为"yyyy-MM-dd"
fields String day 有效值year,month,day,表示选择器的粒度
bindchange EventHandle   value改变时触发change事件,event.detail= { value:value}

示例代码如下:

picker.wxml:

<view class="section">
 <view class="section__title">地区选择器</view>
 <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
 <view class="picker">
  当前选择:{{array[index]}}
 </view>
 </picker>
</view>
<view class="section">
 <view class="section__title">时间选择器</view>
 <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
 <view class="picker">
  当前选择: {{time}}
 </view>
 </picker>
</view>
<view class="section">
 <view class="section__title">日期选择器</view>
 <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
 <view class="picker">
  当前选择: {{date}}
 </view>
 </picker>
</view>

picker.js:

Page({
 data: {
 array: ['美国', '中国', '巴西', '日本'],
 index: 0,
 date: '2016-09-01',
 time: '12:01'
 },
 bindPickerChange: function(e) {
 console.log('picker发送选择改变,携带值为', e.detail.value)
 this.setData({
  index: e.detail.value
 })
 },
 bindDateChange: function(e) {
 this.setData({
  date: e.detail.value
 })
 },
 bindTimeChange: function(e) {
 this.setData({
  time: e.detail.value
 })
 }
})

简单样式布局picker.wxss:

.section {
 display: flex;
 flex-direction: column;
 padding: 20rpx 0rpx;
 color: #333;
}
.section__title{
 font-size: 40rpx;
 margin: 10rpx 0rpx;
}

运行效果:

微信小程序picker组件简单用法示例【附demo源码下载】

附:demo源码点击此处本站下载

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
让textarea控件的滚动条怎是位与最下方
Apr 20 Javascript
jquery 批量上传图片实现代码
Jan 28 Javascript
JQuery的Ajax跨域请求原理概述及实例
Apr 26 Javascript
javascript中Object使用详解
Jan 26 Javascript
jQuery表单域属性过滤器用法分析
Feb 10 Javascript
JS给超链接加确认对话框的方法
Feb 24 Javascript
使用伪命名空间封装保护独自创建的对象方法
Aug 04 Javascript
bootstrap table操作技巧分享
Feb 15 Javascript
Centos6.8下Node.js安装教程
May 12 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
Dec 05 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
Sep 03 Javascript
微信小程序实现下滑到底部自动翻页功能
Mar 07 Javascript
Vue DevTools调试工具的使用
Dec 05 #Javascript
Vue 项目部署到服务器的问题解决方法
Dec 05 #Javascript
webpack学习教程之前端性能优化总结
Dec 05 #Javascript
vue实现消息的无缝滚动效果的示例代码
Dec 05 #Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
Dec 04 #Javascript
JS实现的计数排序与基数排序算法示例
Dec 04 #Javascript
JS 中document.write()的用法和清空的原因浅析
Dec 04 #Javascript
You might like
ThinkPHP进程计数类Process用法实例详解
2015/09/25 PHP
php获取访问者浏览页面的浏览器类型
2017/01/23 PHP
php+Memcached实现简单留言板功能示例
2017/02/15 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
javascript getElementsByClassName实现代码
2010/10/11 Javascript
JavaScript面向对象程序设计三 原型模式(上)
2011/12/21 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
2013/12/03 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
2014/04/04 Javascript
用jquery模仿的a的title属性的例子
2014/10/22 Javascript
angularJS 指令封装回到顶部示例详解
2017/01/22 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
2017/05/03 Javascript
将 vue 生成的 js 上传到七牛的实例
2017/07/28 Javascript
详解webpack+ES6+Sass搭建多页面应用
2018/11/05 Javascript
jquery使用echarts实现有向图可视化功能示例
2019/11/25 jQuery
如何在 Vue 表单中处理图片
2021/01/26 Vue.js
python 读写txt文件 json文件的实现方法
2016/10/22 Python
python 迭代器和iter()函数详解及实例
2017/03/21 Python
对python插入数据库和生成插入sql的示例讲解
2018/11/14 Python
Django页面数据的缓存与使用的具体方法
2019/04/23 Python
django如何通过类视图使用装饰器
2019/07/24 Python
解决django 新增加用户信息出现错误的问题
2019/07/28 Python
Python使用Turtle库绘制一棵西兰花
2019/11/23 Python
pandas-resample按时间聚合实例
2019/12/27 Python
浅谈pytorch卷积核大小的设置对全连接神经元的影响
2020/01/10 Python
css3打造一款漂亮的卡哇伊按钮
2013/03/20 HTML / CSS
详解canvas绘制多张图的排列顺序问题
2019/01/21 HTML / CSS
英国运动风奢侈品购物网站:Maison De Fashion
2020/08/28 全球购物
广告学专业毕业生自荐信
2013/09/24 职场文书
经济信息系毕业生自荐信范文
2014/03/15 职场文书
公司承诺书格式
2014/05/21 职场文书
团队拓展活动总结
2014/08/27 职场文书
地球物理学专业推荐信
2014/09/08 职场文书
质量保证书格式
2015/02/27 职场文书
2016年社区六一儿童节活动总结
2016/04/06 职场文书
MySQL数据库索引的最左匹配原则
2021/11/20 MySQL