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

点击查看原文