首页 > 代码库 > 微信小程序组件解读和分析:十二、picker滚动选择器
微信小程序组件解读和分析:十二、picker滚动选择器
picker滚动选择器组件说明:
picker:
滚动选择器,现支持三种选择器,通过mode属性来区分,
分别是普通选择器(mode = selector),时间选择器(mode = time),日期选择器(mode = date),
默认是普通选择器。
picker滚动选择器示例代码运行效果如下:
下面是WXML代码:
[XML] 纯文本查看 复制代码
?
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代码:
[JavaScript] 纯文本查看 复制代码
?
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代码:
[CSS] 纯文本查看 复制代码
?
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滚动选择器
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。