scroll-view可滚动视图区域

可滚动视图区域。

组件用法：

纵向滚动用法

Tip:

1. 使用竖向滚动时，需要给一个固定高度，通过 WXSS 设置 height，否则无法滚动。
2. 当滚动到顶部时会触发bindscrolltoupper事件（具体可留意GIF输出）
3. 当滚动到底部时会触发bindscrolltolower事件（具体可留意GIF输出）

效果图：

wxml

1. <scroll-view scroll-y="true" style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
2. <view id="green" class="scroll-view-item bc_green"></view>
3. <view id="red" class="scroll-view-item bc_red"></view>
4. <view id="yellow" class="scroll-view-item bc_yellow"></view>
5. <view id="blue" class="scroll-view-item bc_blue"></view>
6. </scroll-view>
7. <view class="btn-area">
8. <button size="mini" bindtap="tap">click me to scroll into view </button>
9. <button size="mini" bindtap="tapMove">click me to scroll</button>
10. </view>

js

1. var order = ['red', 'yellow', 'blue', 'green', 'red']
2. Page({
3. data: {
4. toView: 'green',
5. scrollTop: 100,
6. scrollLeft: 0
7. },
8. //滚动条滚到顶部的时候触发
9. upper: function(e) {
10. console.log(e)
11. },
12. //滚动条滚到底部的时候触发
13. lower: function(e) {
14. console.log(e)
15. },
16. //滚动条滚动后触发
17. scroll: function(e) {
18. console.log(e)
19. },
20. //点击按钮切换到下一个view
21. tap: function(e) {
22. for (var i = 0; i < order.length; ++i) {
23. if (order[i] === this.data.toView) {
24. this.setData({
25. toView: order[i + 1]
26. })
27. break
28. }
29. }
30. },
31. //通过设置滚动条位置实现画面滚动
32. tapMove: function(e) {
33. this.setData({
34. scrollTop: this.data.scrollTop + 10
35. })
36. }
37. })

css

1. .scroll-view_H{
2. white-space: nowrap;
3. }
4. .scroll-view-item{
5. height: 200px;
6. }
7. .scroll-view-item_H{
8. display: inline-block;
9. width: 100%;
10. height: 200px;
11. }

横向滚动用法

Tip:

1. 横向滚动无法使用scroll-into-view属性。
2. 当滚动到最左边时会触发bindscrolltoupper事件（具体可留意GIF输出）
3. 当滚动到最右边时会触发bindscrolltolower事件（具体可留意GIF输出）

效果图：

wxml

1. <scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-left="{{scrollLeft}}">
2. <view id="green" class="scroll-view-item_H bc_green"></view>
3. <view id="red" class="scroll-view-item_H bc_red"></view>
4. <view id="yellow" class="scroll-view-item_H bc_yellow"></view>
5. <view id="blue" class="scroll-view-item_H bc_blue"></view>
6. </scroll-view>

js

1. var order = ['red', 'yellow', 'blue', 'green', 'red']
2. Page({
3. data: {
4. toView: 'green',
5. scrollTop: 100,
6. scrollLeft: 0
7. },
8. //滚动条滚到顶部的时候触发
9. upper: function(e) {
10. console.log(e)
11. },
12. //滚动条滚到底部的时候触发
13. lower: function(e) {
14. console.log(e)
15. },
16. //滚动条滚动后触发
17. scroll: function(e) {
18. console.log(e)
19. },
20. //点击按钮切换到下一个view
21. tap: function(e) {
22. for (var i = 0; i < order.length; ++i) {
23. if (order[i] === this.data.toView) {
24. this.setData({
25. toView: order[i + 1]
26. })
27. break
28. }
29. }
30. },
31. //通过设置滚动条位置实现画面滚动
32. tapMove: function(e) {
33. this.setData({
34. scrollLeft: this.data.scrollLeft + 10
35. })
36. }
37. })

wxss

1. .scroll-view_H{
2. white-space: nowrap;
3. }
4. .scroll-view-item{
5. height: 200px;
6. }
7. .scroll-view-item_H{
8. display: inline-block;
9. width: 100%;
10. height: 200px;
11. }

主要属性：

属性	类型	默认值	描述
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}

相关链接：

• 微信小程序填坑之路之上拉加载