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} |