微信小程序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笔试题目附答案@20081025_jb51.net
Oct 26 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
Mar 22 Javascript
js渐变显示渐变消失示例代码
Aug 01 Javascript
jQuery聚合函数实例
May 21 Javascript
浅谈JavaScript中的作用域和闭包问题
Jul 07 Javascript
使用jQuery调用XML实现无刷新即时聊天
Aug 07 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
Feb 08 Javascript
js输入框使用正则表达式校验输入内容的实例
Feb 12 Javascript
详解打造 Vue.js 可复用组件
Mar 24 Javascript
JS获取url参数,JS发送json格式的POST请求方法
Mar 29 Javascript
webpack实现一个行内样式px转vw的loader示例
Sep 13 Javascript
基于layui轮播图满屏是高度自适应的解决方法
Sep 16 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 win下Socket方式发邮件类
2009/08/21 PHP
优化PHP程序的方法小结
2012/02/23 PHP
浅析PHP关键词替换的类(避免重复替换,保留与还原原始链接)
2015/09/22 PHP
PHP回调函数概念与用法实例分析
2017/11/03 PHP
JavaScript 一道字符串分解的题目
2011/08/03 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
2014/01/26 Javascript
使用jQuery和PHP实现类似360功能开关效果
2014/02/12 Javascript
通过正则表达式实现表单验证是否为中文
2014/02/18 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
2014/03/12 Javascript
js实现浏览本地文件并显示扩展名的方法
2015/08/17 Javascript
js判断上传文件后缀名是否合法
2016/01/28 Javascript
JavaScript和JQuery获取DIV值的方法示例
2017/03/07 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
2017/03/22 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
2017/12/11 Javascript
jQuery插件jsonview展示json数据
2018/05/26 jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
2019/01/18 jQuery
微信小程序class封装http代码实例
2019/08/24 Javascript
Echarts实现单条折线可拖拽效果
2019/12/19 Javascript
JS性能优化实现方法及优点进行
2020/08/30 Javascript
vue脚手架项目创建步骤详解
2021/03/02 Vue.js
[02:41]DOTA2英雄基础教程 谜团
2013/12/10 DOTA
[54:15]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第二场2月1日
2021/03/11 DOTA
Django1.3添加app提示模块不存在的解决方法
2014/08/26 Python
python timestamp和datetime之间转换详解
2017/12/11 Python
在Python 不同级目录之间模块的调用方法
2019/01/19 Python
详解python读取image
2019/04/03 Python
python设计tcp数据包协议类的例子
2019/07/23 Python
django的csrf实现过程详解
2019/07/26 Python
对tensorflow 中tile函数的使用详解
2020/02/07 Python
python使用隐式循环快速求和的实现示例
2020/09/11 Python
Python引入多个模块及包的概念过程解析
2020/09/21 Python
美国NBA官方商店:NBA Store
2019/04/12 全球购物
计算机应届毕业生自荐信范文
2014/02/23 职场文书
事业单位年度考核个人总结
2015/02/12 职场文书
导游词之西江千户苗寨
2019/12/24 职场文书