微信小程序 picker 组件详解及简单实例


Posted in Javascript onJanuary 10, 2017

微信小程序picker

相关文章:

微信小程序 Button

微信小程序 radio

微信小程序 slider

微信小程序 switch

微信小程序 textarea

微信小程序 picker-view

微信小程序 picker

微信小程序 label

微信小程序 input 

微信小程序 form

微信小程序 checkbox

实现效果图:

微信小程序 picker 组件详解及简单实例

微信小程序picker

滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器

普通选择器: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"
  String   表示有效时间范围的开始,字符串格式为"hh:mm"
  String   表示有效时间范围的结束,字符串格式为"hh:mm"
  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}

示例代码:

<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>
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.time
 })
 }
})

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
Mootools 1.2教程 正则表达式
Sep 15 Javascript
显示js对象所有属性和方法的函数
Oct 16 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
Jan 07 Javascript
jquery sortable的拖动方法示例详解
Jan 16 Javascript
jQuery实现的在线答题功能
Apr 12 Javascript
JS判断元素是否在数组内的实现代码
Mar 30 Javascript
浅谈Javascript中的函数、this以及原型
Oct 09 Javascript
javascript跨域请求包装函数与用法示例
Nov 03 Javascript
smartupload实现文件上传时获取表单数据(推荐)
Dec 12 Javascript
Angular 如何使用第三方库的方法
Apr 18 Javascript
javascript json字符串到json对象转义问题
Jan 22 Javascript
Vue实现Header渐隐渐现效果的实例代码
Nov 05 Javascript
微信小程序 label 组件详解及简单实例
Jan 10 #Javascript
实现一个简单的vue无限加载指令方法
Jan 10 #Javascript
微信小程序 input输入框详解及简单实例
Jan 10 #Javascript
微信小程序 form组件详解及简单实例
Jan 10 #Javascript
微信小程序  checkbox组件详解及简单实例
Jan 10 #Javascript
使用vue.js实现联动效果的示例代码
Jan 10 #Javascript
jQuery插件ajaxFileUpload使用详解
Jan 10 #Javascript
You might like
php中利用post传递字符串重定向的实现代码
2011/04/21 PHP
PHP MySQL应用中使用XOR运算加密算法分享
2011/08/28 PHP
UCenter 批量添加用户的php代码
2012/07/17 PHP
CodeIgniter实现更改view文件夹路径的方法
2014/07/04 PHP
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
浅析ThinkPHP缓存之快速缓存(F方法)和动态缓存(S方法)(日常整理)
2015/10/26 PHP
php解决安全问题的方法实例
2019/09/19 PHP
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
2009/01/30 Javascript
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
2011/02/23 Javascript
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
2011/03/28 Javascript
vue货币过滤器的实现方法
2017/04/01 Javascript
Vue使用vue-cli创建项目
2017/09/01 Javascript
如何为你的JavaScript代码日志着色详解
2019/04/08 Javascript
JS字符串与二进制的相互转化实例代码详解
2019/06/28 Javascript
使用Vue调取接口,并渲染数据的示例代码
2019/10/28 Javascript
javascrpt密码强度校验函数详解
2020/03/18 Javascript
js实现页面图片消除效果
2020/03/24 Javascript
原生js 实现表单验证功能
2021/02/08 Javascript
解读Python中degrees()方法的使用
2015/05/18 Python
python从网络读取图片并直接进行处理的方法
2015/05/22 Python
详解Python的Flask框架中生成SECRET_KEY密钥的方法
2016/06/07 Python
利用python将xml文件解析成html文件的实现方法
2017/12/22 Python
python的dataframe转换为多维矩阵的方法
2018/04/11 Python
python对html过滤处理的方法
2018/10/21 Python
python write无法写入文件的解决方法
2019/01/23 Python
分析运行中的 Python 进程详细解析
2019/06/22 Python
树莓派+摄像头实现对移动物体的检测
2019/06/22 Python
Python Web程序搭建简单的Web服务器
2019/07/31 Python
浅析Django 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求
2020/03/09 Python
python Selenium 库的使用技巧
2020/10/16 Python
python pillow库的基础使用教程
2021/01/13 Python
十佳教师事迹材料
2014/01/11 职场文书
银行见习期自我鉴定
2014/01/29 职场文书
自荐信的基本格式
2014/02/22 职场文书
部门2014年度工作总结
2014/11/12 职场文书
详解Go语言Slice作为函数参数的使用
2021/07/02 Golang