微信

微信小程序组件解读和分析：十二、picker滚动选择器

云博小周宇4 Mins Read

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}

点击查看原文