微信小程序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 相关文章推荐
JavaScript 判断浏览器类型及版本
Feb 21 Javascript
Javascript学习笔记6 prototype的提出
Jan 11 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
Feb 27 Javascript
jquery带动画效果幻灯片特效代码
Aug 27 Javascript
基于JavaScript代码实现随机漂浮图片广告
Jan 05 Javascript
微信小程序实现根据字母选择城市功能
Aug 16 Javascript
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
3种vue组件的书写形式
Nov 29 Javascript
vue视图不更新情况详解
May 16 Javascript
详解Node.js异步处理的各种写法
Jun 09 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
Oct 23 Javascript
Vue SPA 初次进入加载动画实现代码
Nov 14 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
也谈 PHP 和 MYSQL
2006/10/09 PHP
第八节--访问方式
2006/11/16 PHP
php查看session内容的函数
2008/08/27 PHP
Zend的MVC机制使用分析(二)
2013/05/02 PHP
PHP编码规范的深入探讨
2013/06/06 PHP
PHP网页安全认证的实例详解
2017/09/28 PHP
laravel 框架实现无限级分类的方法示例
2019/10/31 PHP
非主流的textarea自增长实现js代码
2011/12/20 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
2015/04/12 Javascript
JS正则替换去空格的方法
2017/03/24 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
Vue表单demo v-model双向绑定问题
2018/06/29 Javascript
vue-cli3.0 环境变量与模式配置方法
2018/11/08 Javascript
vue-cli3环境变量与分环境打包的方法示例
2019/02/18 Javascript
微信小程序云开发如何使用云函数生成二维码
2019/05/18 Javascript
微信小程序上传文件到阿里OSS教程
2019/05/20 Javascript
JS设置自定义快捷键并实现图片上下左右移动
2019/10/17 Javascript
vue实现简易计算器功能
2021/01/20 Vue.js
vue实现禁止浏览器记住密码功能的示例代码
2021/02/03 Vue.js
[01:06:32]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第一局
2016/02/28 DOTA
Python使用base64模块进行二进制数据编码详解
2018/01/11 Python
python 函数内部修改外部变量的方法
2018/12/18 Python
Python中捕获键盘的方式详解
2019/03/28 Python
Python中zip()函数的简单用法举例
2019/09/02 Python
python安装本地whl的实例步骤
2019/10/12 Python
浅谈Python类中的self到底是干啥的
2019/11/11 Python
为世界各地的女性设计和生产时尚服装:ROMWE
2016/09/17 全球购物
日本最大化妆品和美容产品的综合口碑网站:cosme shopping
2019/08/28 全球购物
怎么写有吸引力的自荐信
2013/11/17 职场文书
供用电专业求职信
2014/07/07 职场文书
创建绿色社区汇报材料
2014/08/22 职场文书
党支部2014年度工作总结
2014/12/04 职场文书
2015年劳动部工作总结
2015/05/23 职场文书
母亲去世追悼词
2015/06/23 职场文书
小学校本教研总结
2015/08/13 职场文书
「玫瑰之王的葬礼」舞台剧主视觉图公开
2022/03/21 日漫