微信小程序组件解读和分析：二、scroll-view可滚动视图区域
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}
|