微信小程序 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 相关文章推荐
Firefox outerHTML实现代码
Jun 04 Javascript
jQuery提示效果代码分享
Nov 20 Javascript
AngularJS入门教程之Hello World!
Dec 06 Javascript
jQuery简单实现中间浮窗效果
Sep 04 Javascript
jQuery实现可移动选项的左右下拉列表示例
Dec 26 Javascript
ES6中参数的默认值语法介绍
May 03 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
Feb 28 Javascript
vue加载自定义的js文件方法
Mar 13 Javascript
JS实现根据详细地址获取经纬度功能示例
Apr 16 Javascript
vue使用微信扫一扫功能的实现代码
Apr 11 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
Aug 13 Javascript
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
微信小程序 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编程效率的方法
2013/11/07 PHP
PHP实现把MySQL数据库导出为.sql文件实例(仿PHPMyadmin导出功能)
2014/05/10 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
简单实现php上传文件功能
2017/09/21 PHP
Laravel + Elasticsearch 实现中文搜索的方法
2020/02/02 PHP
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
2010/06/21 Javascript
微博@符号的用户名提示效果。(想@到谁?)
2010/11/05 Javascript
IE6下CSS图片缓存问题解决方法
2010/12/09 Javascript
js读写(删除)Cookie实例详解
2013/04/17 Javascript
JavaScript中使用Object.create()创建对象介绍
2014/12/30 Javascript
JavaScript常用脚本汇总(三)
2015/03/04 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
2015/12/04 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
2016/12/28 Javascript
详解在Vue中通过自定义指令获取dom元素
2017/03/04 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
2017/03/30 jQuery
利用js的闭包原理做对象封装及调用方法
2017/04/07 Javascript
JS实现百度搜索接口及链接功能实例代码
2018/02/02 Javascript
vue中实现methods一个方法调用另外一个方法
2018/02/08 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
2018/05/31 Javascript
Element-ui DatePicker显示周数的方法示例
2019/07/19 Javascript
python+mysql实现简单的web程序
2014/09/11 Python
详细讲解Python中的文件I/O操作
2015/05/24 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
Python generator生成器和yield表达式详解
2019/08/08 Python
Python调用接口合并Excel表代码实例
2020/03/31 Python
python包的导入方式总结
2021/03/02 Python
分享CSS3制作卡片式图片的方法
2016/07/08 HTML / CSS
Clarks鞋法国官方网站:英国其乐鞋品牌
2018/02/11 全球购物
Opodo意大利:欧洲市场上领先的在线旅行社
2019/10/24 全球购物
Orlebar Brown官网:设计师泳裤和泳装
2020/12/08 全球购物
《乞巧》教学反思
2014/02/27 职场文书
公务员保密承诺书
2014/03/27 职场文书
雏鹰争章活动总结
2014/05/09 职场文书
食堂采购员岗位职责
2015/04/03 职场文书
关于环保的广播稿
2015/12/17 职场文书
总结Python连接CS2000的详细步骤
2021/06/23 Python