scroll-view可滾動視圖區域
組件說明:
可滾動視圖區域。
組件用法： 縱向滾動用法Tip:
- 使用豎向滾動時，需要給一個固定高度，通過 WXSS 設置 height，否則無法滾動。
- 當滾動到頂部時會觸發bindscrolltoupper事件（具體可留意GIF輸出）
- 當滾動到底部時會觸發bindscrolltolower事件（具體可留意GIF輸出）
scroll-view可滾動視圖區域的示例代碼運行效果如下：
下面是WXML代碼：
[XML]
純文本查看 復制代碼
|
01
02
03
04
05
06
07
08
09
10
|
<
scroll-view
scroll-y
=
"true"
style
=
"height: 200px;"
bindscrolltoupper
=
"upper"
bindscrolltolower
=
"lower"
bindscroll
=
"scroll"
scroll-into-view
=
"{{toView}}"
scroll-top
=
"{{scrollTop}}"
>
<
view
id
=
"green"
class
=
"scroll-view-item bc_green"
></
view
>
<
view
id
=
"red"
class
=
"scroll-view-item bc_red"
></
view
>
<
view
id
=
"yellow"
class
=
"scroll-view-item bc_yellow"
></
view
>
<
view
id
=
"blue"
class
=
"scroll-view-item bc_blue"
></
view
>
</
scroll-view
>
<
view
class
=
"btn-area"
>
<
button
size
=
"mini"
bindtap
=
"tap"
>click me to scroll into view </
button
>
<
button
size
=
"mini"
bindtap
=
"tapMove"
>click me to scroll</
button
>
</
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
25
26
27
28
29
30
31
32
33
34
35
36
37
|
var
order = [
'red'
,
'yellow'
,
'blue'
,
'green'
,
'red'
]
Page({
data: {
toView:
'green'
,
scrollTop: 100,
scrollLeft: 0
},
//滾動條滾到頂部的時候觸發
upper:
function
(e) {
console.log(e)
},
//滾動條滾到底部的時候觸發
lower:
function
(e) {
console.log(e)
},
//滾動條滾動后觸發
scroll:
function
(e) {
console.log(e)
},
//點擊按鈕切換到下一個view
tap:
function
(e) {
for
(
var
i = 0; i < order.length; ++i) {
if
(order ===
this
.data.toView) {
this
.setData({
toView: order[i + 1]
})
break
}
}
},
//通過設置滾動條位置實現畫面滾動
tapMove:
function
(e) {
this
.setData({
scrollTop:
this
.data.scrollTop + 10
})
}
})
|
下面是WXSS代碼：
[CSS]
純文本查看 復制代碼
|
01
02
03
04
05
06
07
08
09
10
11
|
.scroll-view_H{
white-space
:
nowrap
;
}
.scroll-view-item{
height
:
200px
;
}
.scroll-view-item_H{
display
: inline-
block
;
width
:
100%
;
height
:
200px
;
}
|
橫向滾動用法
Tip:
- 橫向滾動無法使用scroll-into-view屬性。
- 當滾動到最左邊時會觸發bindscrolltoupper事件（具體可留意GIF輸出）
- 當滾動到最右邊時會觸發bindscrolltolower事件（具體可留意GIF輸出）
橫向滾動用法的
效果圖：
下面是WXML代碼：
[XML]
純文本查看 復制代碼
|
1
2
3
4
5
6
|
<
scroll-view
class
=
"scroll-view_H"
scroll-x
=
"true"
style
=
"width: 100%"
bindscrolltoupper
=
"upper"
bindscrolltolower
=
"lower"
bindscroll
=
"scroll"
scroll-left
=
"{{scrollLeft}}"
>
<
view
id
=
"green"
class
=
"scroll-view-item_H bc_green"
></
view
>
<
view
id
=
"red"
class
=
"scroll-view-item_H bc_red"
></
view
>
<
view
id
=
"yellow"
class
=
"scroll-view-item_H bc_yellow"
></
view
>
<
view
id
=
"blue"
class
=
"scroll-view-item_H bc_blue"
></
view
>
</
scroll-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
25
26
27
28
29
30
31
32
33
34
35
36
37
|
var
order = [
'red'
,
'yellow'
,
'blue'
,
'green'
,
'red'
]
Page({
data: {
toView:
'green'
,
scrollTop: 100,
scrollLeft: 0
},
//滾動條滾到頂部的時候觸發
upper:
function
(e) {
console.log(e)
},
//滾動條滾到底部的時候觸發
lower:
function
(e) {
console.log(e)
},
//滾動條滾動后觸發
scroll:
function
(e) {
console.log(e)
},
//點擊按鈕切換到下一個view
tap:
function
(e) {
for
(
var
i = 0; i < order.length; ++i) {
if
(order ===
this
.data.toView) {
this
.setData({
toView: order[i + 1]
})
break
}
}
},
//通過設置滾動條位置實現畫面滾動
tapMove:
function
(e) {
this
.setData({
scrollLeft:
this
.data.scrollLeft + 10
})
}
})
|
下面是WXSS代碼：
[CSS]
純文本查看 復制代碼
|
01
02
03
04
05
06
07
08
09
10
11
|
.scroll-view_H{
white-space
:
nowrap
;
}
.scroll-view-item{
height
:
200px
;
}
.scroll-view-item_H{
display
: inline-
block
;
width
:
100%
;
height
:
200px
;
}
|
scroll-view可滾動視圖區域的主要屬性：
|
屬性
|
類型
|
默認值
|
描述
|
|
scroll-x
|
Boolean
|
false
|
允許橫向滾動
|
|
scroll-y
|
Boolean
|
false
|
允許縱向滾動
|
|
upper-threshold
|
Number
|
50
|
距頂部/左邊多遠時（單位px），觸發 scrolltoupper 事件
|
|
lower-threshold
|
Number
|
50
|
距底部/右邊多遠時（單位px），觸發 scrolltolower 事件
|
|
scroll-top
|
Number
|
設置豎向滾動條位置
|
|
|
scroll-left
|
Number
|
設置橫向滾動條位置
|
|
|
scroll-into-view
|
String
|
值應為某子元素id，則滾動到該元素，元素頂部對齊滾動區域頂部
|
|
|
bindscrolltoupper
|
EventHandle
|
滾動到頂部/左邊，會觸發 scrolltoupper 事件
|
|
|
bindscrolltolower
|
EventHandle
|
滾動到底部/右邊，會觸發 scrolltolower 事件
|
|
|
bindscroll
|
EventHandle
|
滾動時觸發，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
|