微信小程序组件解读和分析：二、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}