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