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