微信小程序组件解读和分析:十二、picker滚动选择器
picker滚动选择器组件说明:
picker:
滚动选择器,现支持三种选择器,通过mode属性来区分,
分别是普通选择器(mode = selector),时间选择器(mode = time),日期选择器(mode = date),
默认是普通选择器。
picker滚动选择器示例代码运行效果如下:
下面是WXML代码:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
< view class = "page" > < view class = "page__hd" > < text class = "page__title" >picker</ text > < text class = "page__desc" >选择器</ text > </ view > < view class = "page__bd" > < 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 > </ view > </ view > |
下面是JS代码:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
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 }) } }) |
下面是WXSS代码:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
.page { min-height : 100% ; flex: 1 ; background-color : #FBF9FE ; font-size : 32 rpx; font-family : -apple-system-font, Helvetica Neue, Helvetica , sans-serif ; overflow : hidden ; } .page__hd{ padding : 50 rpx 50 rpx 100 rpx 50 rpx; text-align : center ; } .page__title{ display : inline- block ; padding : 20 rpx 40 rpx; font-size : 32 rpx; color : #AAAAAA ; border-bottom : 1px solid #CCCCCC ; } .page__desc{ display : none ; margin-top : 20 rpx; font-size : 26 rpx; color : #BBBBBB ; } .picker{ padding : 26 rpx; background-color : #FFFFFF ; } .section{ margin-bottom : 80 rpx; } .section__title{ margin-bottom : 16 rpx; padding-left : 30 rpx; padding-right : 30 rpx; } |
picker滚动选择器的主要属性:
普通选择器:(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滚动选择器的更多相关文章
- 微信小程序组件解读和分析:二、scroll-view可滚动视图区域
scroll-view可滚动视图区域组件说明: 可滚动视图区域. 组件用法:纵向滚动用法 Tip: 使用竖向滚动时,需要给一个固定高度,通过 WXSS 设置 height,否则无法滚动. 当滚动到顶部 ...
- 微信小程序组件解读和分析:六、progress进度条
progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行.progress进度条是微信小程序的组件,和HTML5的进度条progress类似. pro ...
- 微信小程序组件解读和分析:五、text文本
text文本组件说明: text 文本就是微信小程序中显示出来的文本. text文本组件的示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 1 2 3 4 <v ...
- 微信小程序组件解读和分析:四、icon图标
icon图标组件说明: icon是一种图标格式,用于系统图标.软件图标等,这种图标扩展名为.icon..ico.常见的软件或windows桌面上的那些图标一般都是ICON格式的.在应用上面很多地方 ...
- 微信小程序组件解读和分析:十四、slider滑动选择器
slider滑动选择器组件说明: 滑动选择器. slider滑动选择器示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 ...
- 微信小程序组件解读和分析:十、input输入框
input输入框组件说明: 本文介绍input 输入框的各种参数及特性. input输入框示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 01 02 03 04 0 ...
- 微信小程序组件解读和分析:十五、switch 开关选择器
switch 开关选择器组件说明: switch,开关选择器.只能选择或者不选.这种属于表单控件或者查询条件控件. switch 开关选择器示例代码运行效果如下: 下面是WXML代码: [XML] 纯 ...
- 微信小程序组件解读和分析:八、checkbox复选项
checkbox复选项组件说明: checkbox是小程序表单组件中的一个组件,作用是在表单中引导用户做出选择. 要使用checkbox组件,还需要在同组中所有的checkbox标签外使用checkb ...
- 微信小程序组件解读和分析:一、view(视图容器 )
view组件说明: 视图容器 跟HTML代码中的DIV一样,可以包裹其他的组件,也可以被包裹在其他的组件内部.用起来比较自由随意,没有固定的结构. view组件的用法: 示例项目的wxml ...
随机推荐
- 论持久战之PHPStorm Xdebug Remote 调试环境搭建(不依赖本地环境)
最近公司自己搭建了一个资源管理平台,哈哈,当然是我在github上找的,后台用PHP开发.个人觉得写得非常nice,web页面几乎模拟了真实OS,有兴趣的朋友下载部署体验https://github. ...
- vue入门教程 (vueJS2.X)
vue入门教程vueJS2.X 写在前面 看完此教程可以达到:能看懂并能修改简单的vue项目. 看的过程中,请把所有例子都放到html文件中跑一遍. Vue.js 是什么 Vue.js(读音 /vju ...
- 织梦DEDE系统跨站跨数据库调用数据显示
调用方法 本标签的调用格式为: {dede:sql sql="一条完整的SQL语句" appname="数据库配置参数"}您的底层模板{/dede:sql} 稍 ...
- POJ - 1986 Distance Queries(离线Tarjan算法)
1.一颗树中,给出a,b,求最近的距离.(我没考虑不联通的情况,即不是一颗树的情况) 2.用最近公共祖先来求, 记下根结点到任意一点的距离dis[],这样ans = dis[u] + dis[v] - ...
- java的内部类解析
内部类分为四种: 成员内部类.类方法与普通方法同级: 局部内部类.类方法内部,局部内部类有构造器,通过构造器把外部的变量传入局部内部类再使用是完全可以的 匿名内部类.匿名内部类是唯一没有构造器的类,和 ...
- P4317 花神的数论题 dp
这题我一开始就想到数位dp了,其实好像也不是很难,但是自己写不出来...常规套路,f[i][j][k][t],从后往前填数,i位,j代表是否卡着上沿,k是现在有几个1,t是想要有几个.记忆化搜索就ok ...
- 从0开始学习Hadoop(2)安装JDK以及设置SSH
安装JDK 使用ppa/源方式安装 1.添加ppa sudo add-apt-repository ppa:webupd8team/java sudo apt-get update 2.安装oracl ...
- Nvidia GPU 算力查询
GPU Compute Capability Tesla K80 3.7 Tesla K40 3.5 Tesla K20 3.5 Tesla C2075 2.0 Tesla C2050/C2070 2 ...
- Spring--quartz中cronExpression配置说明
Spring--quartz中cronExpression Java代码 字段 允许值 允许的特殊字符 秒 0-59 , - * / 分 ...
- VS2010打包回顾
1. 在vs2010 选择“新建项目”à“ 其他项目类型”à“ Visual Studio Installerà “安装项目”: 命名为:Setup1 . 这是在VS2010中将有三个文件夹, 1. ...