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