微信小程序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 相关文章推荐
Google排名中的10个最著名的 JavaScript库
Apr 27 Javascript
js的一些常用方法小结
Jun 29 Javascript
js模拟滚动条(横向竖向)
Feb 22 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
Nov 10 Javascript
理解javascript中的严格模式
Feb 01 Javascript
js HTML5 Ajax实现文件上传进度条功能
Feb 13 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
Sep 20 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
Oct 26 Javascript
原生JS实现逼真的图片3D旋转效果详解
Feb 16 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
Sep 17 Javascript
js实现转动骰子模型
Oct 24 Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 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
把77A收信机改造成收音机
2021/03/02 无线电
ThinkPHP访问不存在的模块跳转到404页面的方法
2014/06/19 PHP
php字符比较函数similar_text、strnatcmp与strcasecmp用法分析
2014/11/18 PHP
PHP分享图片的生成方法
2018/04/25 PHP
Laravel实现ORM带条件搜索分页
2019/10/24 PHP
Jquery 弹出层插件实现代码
2009/10/24 Javascript
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
JS获取页面input控件中所有text控件并追加样式属性
2013/02/25 Javascript
JS 获取滚动条高度示例代码
2013/10/24 Javascript
jquery批量设置属性readonly和disabled的方法
2014/01/24 Javascript
jquery实现可关闭的倒计时广告特效代码
2015/09/02 Javascript
js点击文本框弹出可选择的checkbox复选框
2016/02/03 Javascript
JS继承之借用构造函数继承和组合继承
2016/09/07 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
2018/05/13 Javascript
详解如何在你的Vue项目配置vux
2018/06/04 Javascript
解决vue接口数据赋值给data没有反应的问题
2018/08/27 Javascript
Python实现PS滤镜碎片特效功能示例
2018/01/24 Python
python中文编码与json中文输出问题详解
2018/08/24 Python
Python小进度条显示代码
2019/03/05 Python
pyinstaller打包程序exe踩过的坑
2019/11/19 Python
tornado+celery的简单使用详解
2019/12/21 Python
Python Sphinx使用实例及问题解决
2020/01/17 Python
Python破解BiliBili滑块验证码的思路详解(完美避开人机识别)
2020/02/17 Python
荷兰DOD药房中文官网:DeOnlineDrogist
2020/12/27 全球购物
你常见到的runtime exception
2016/09/05 面试题
自动化工程专业个人应聘自荐信
2013/09/26 职场文书
计算机本科生自荐信
2013/10/15 职场文书
办理护照介绍信
2014/01/16 职场文书
承认错误的检讨书
2014/01/30 职场文书
道路交通安全实施方案
2014/03/12 职场文书
大学感恩节活动总结
2015/05/05 职场文书
2016感恩母亲节校园广播稿
2015/12/17 职场文书
《狮子和鹿》教学反思
2016/02/16 职场文书
Nginx安装完成没有生成sbin目录的解决方法
2021/03/31 Servers
Python实现视频自动打码的示例代码
2022/04/08 Python