ScrollView 类型

继承于 Component

模块: cc

滚动视图组件

索引

属性（properties）

• content Node 可滚动展示内容的节点。
• horizontal Boolean 是否开启水平滚动。
• vertical Boolean 是否开启垂直滚动。
• inertia Boolean 是否开启滚动惯性。
• brake Number 开启惯性后，在用户停止触摸后滚动多快停止，0表示永不停止，1表示立刻停止。
• elastic Boolean 是否允许滚动内容超过边界，并在停止触摸后回弹。
• bounceDuration Number 回弹持续的时间，0 表示将立即反弹。
• horizontalScrollBar Scrollbar 水平滚动的 ScrollBar。
• verticalScrollBar Scrollbar 垂直滚动的 ScrollBar。
• scrollEvents Component.EventHandler[] 滚动视图的事件回调函数
• cancelInnerEvents Boolean 如果这个属性被设置为 true，那么滚动行为会取消子节点上注册的触摸事件，默认被设置为 true。 注意，子节点上的 touchstart 事件仍然会触发，触点移动距离非常短的情况下 touchmove 和 touchend 也不会受影响。
• __eventTargets Array Register all related EventTargets, all event callbacks will be removed in _onPreDestroy
• node Node 该组件被附加到的节点。组件总会附加到一个节点。
• uuid String 组件的 uuid，用于编辑器。
• _enabled Boolean
• enabled Boolean 表示该组件自身是否启用。
• enabledInHierarchy Boolean 表示该组件是否被启用并且所在的节点也处于激活状态。
• _isOnLoadCalled Number 返回一个值用来判断 onLoad 是否被调用过，不等于 0 时调用过，等于 0 时未调用。
• _name String
• _objFlags Number
• name String 该对象的名称。
• isValid Boolean 表示该对象是否可用（被销毁后将不可用）。

方法

• scrollToBottom 视图内容将在规定时间内滚动到视图底部。
• scrollToTop 视图内容将在规定时间内滚动到视图顶部。
• scrollToLeft 视图内容将在规定时间内滚动到视图左边。
• scrollToRight 视图内容将在规定时间内滚动到视图右边。
• scrollToTopLeft 视图内容将在规定时间内滚动到视图左上角。
• scrollToTopRight 视图内容将在规定时间内滚动到视图右上角。
• scrollToBottomLeft 视图内容将在规定时间内滚动到视图左下角。
• scrollToBottomRight 视图内容将在规定时间内滚动到视图右下角。
• scrollToOffset 视图内容在规定时间内将滚动到 ScrollView 相对左上角原点的偏移位置, 如果 timeInSecond参数不传，则立即滚动到指定偏移位置。
• getScrollOffset 获取滚动视图相对于左上角原点的当前滚动偏移
• getMaxScrollOffset 获取滚动视图最大可以滚动的偏移量
• scrollToPercentHorizontal 视图内容在规定时间内将滚动到 ScrollView 水平方向的百分比位置上。
• scrollTo 视图内容在规定时间内进行垂直方向和水平方向的滚动，并且滚动到指定百分比位置上。
• scrollToPercentVertical 视图内容在规定时间内滚动到 ScrollView 垂直方向的百分比位置上。
• stopAutoScroll 停止自动滚动, 调用此 API 可以让 Scrollview 立即停止滚动
• setContentPosition 设置当前视图内容的坐标点。
• getContentPosition 获取当前视图内容的坐标点。
• isScrolling 用户是否在拖拽当前滚动视图
• isAutoScrolling 当前滚动视图是否在惯性滚动
• update 如果该组件启用，则每帧调用 update。
• lateUpdate 如果该组件启用，则每帧调用 LateUpdate。
• __preload __preload is called before every onLoad. It is used to initialize the builtin components internally, to avoid checking whether onLoad is called before every public method calls. This method should be removed if script priority is supported.
• onLoad 当附加到一个激活的节点上或者其节点第一次激活时候调用。onLoad 总是会在任何 start 方法调用前执行，这能用于安排脚本的初始化顺序。
• start 如果该组件第一次启用，则在所有组件的 update 之前调用。通常用于需要在所有组件的 onLoad 初始化完毕后执行的逻辑。
• onEnable 当该组件被启用，并且它的节点也激活时。
• onDisable 当该组件被禁用或节点变为无效时调用。
• onDestroy 当该组件被销毁时调用
• onFocusInEditor
• onLostFocusInEditor
• resetInEditor 用来初始化组件或节点的一些属性，当该组件被第一次添加到节点上或用户点击了它的 Reset 菜单时调用。这个回调只会在编辑器下调用。
• addComponent 向节点添加一个组件类，你还可以通过传入脚本的名称来添加组件。
• getComponent 获取节点上指定类型的组件，如果节点有附加指定类型的组件，则返回，如果没有则为空。
  传入参数也可以是脚本的名称。
• getComponents 返回节点上指定类型的所有组件。
• getComponentInChildren 递归查找所有子节点中第一个匹配指定类型的组件。
• getComponentsInChildren 递归查找自身或所有子节点中指定类型的组件
• _getLocalBounds 如果组件的包围盒与节点不同，您可以实现该方法以提供自定义的轴向对齐的包围盒（AABB）， 以便编辑器的场景视图可以正确地执行点选测试。
• onRestore onRestore 是用户在检查器菜单点击 Reset 时，对此组件执行撤消操作后调用的。
  
  如果组件包含了“内部状态”（不在 CCClass 属性中定义的临时成员变量），那么你可能需要实现该方法。
  
  编辑器执行撤销/重做操作时，将调用组件的 get set 来录制和还原组件的状态。 然而，在极端的情况下，它可能无法良好运作。
  那么你就应该实现这个方法，手动根据组件的属性同步“内部状态”。 一旦你实现这个方法，当用户撤销或重做时，组件的所有 get set 都不会再被调用。 这意味着仅仅指定了默认值的属性将被编辑器记录和还原。
  
  同样的，编辑可能无法在极端情况下正确地重置您的组件。
  于是如果你需要支持组件重置菜单，你需要在该方法中手工同步组件属性到“内部状态”。
  一旦你实现这个方法，组件的所有 get set 都不会在重置操作时被调用。 这意味着仅仅指定了默认值的属性将被编辑器重置。
  此方法仅在编辑器下会被调用。
• schedule 调度一个自定义的回调函数。
  如果回调函数已调度，那么将不会重复调度它，只会更新时间间隔参数。
• scheduleOnce 调度一个只运行一次的回调函数，可以指定 0 让回调函数在下一帧立即执行或者在一定的延时之后执行。
• unschedule 取消调度一个自定义的回调函数。
• unscheduleAllCallbacks 取消调度所有已调度的回调函数：定制的回调函数以及 'update' 回调函数。动作不受此方法影响。
• destroy 销毁该对象，并释放所有它对其它对象的引用。
  销毁后，CCObject 不再可用。您可以在访问对象之前使用 cc.isValid(obj) 来检查对象是否已被销毁。 实际销毁操作会延迟到当前帧渲染前执行。
• _destruct Clear all references in the instance.

NOTE: this method will not clear the getter or setter functions which defined in the instance of CCObject. You can override the _destruct method if you need, for example: _destruct: function () { for (var key in this) { if (this.hasOwnProperty(key)) { switch (typeof this[key]) { case 'string': this[key] = ''; break; case 'object': case 'function': this[key] = null; break; } } }

• _onPreDestroy Called before the object being destroyed.
• _serialize The customized serialization for this object. (Editor Only)
• _deserialize Init this object from the custom serialized data.

事件

• scroll-to-top 注意：此事件是从该组件所属的 Node 上面派发出来的，需要用 node.on 来监听。
• scroll-to-bottom 注意：此事件是从该组件所属的 Node 上面派发出来的，需要用 node.on 来监听。
• scroll-to-left 注意：此事件是从该组件所属的 Node 上面派发出来的，需要用 node.on 来监听。
• scroll-to-right 注意：此事件是从该组件所属的 Node 上面派发出来的，需要用 node.on 来监听。
• scrolling 注意：此事件是从该组件所属的 Node 上面派发出来的，需要用 node.on 来监听。
• bounce-bottom 注意：此事件是从该组件所属的 Node 上面派发出来的，需要用 node.on 来监听。
• bounce-top 注意：此事件是从该组件所属的 Node 上面派发出来的，需要用 node.on 来监听。
• bounce-left 注意：此事件是从该组件所属的 Node 上面派发出来的，需要用 node.on 来监听。
• bounce-right 注意：此事件是从该组件所属的 Node 上面派发出来的，需要用 node.on 来监听。
• scroll-ended 注意：此事件是从该组件所属的 Node 上面派发出来的，需要用 node.on 来监听。
• touch-up 注意：此事件是从该组件所属的 Node 上面派发出来的，需要用 node.on 来监听。
• scroll-began 注意：此事件是从该组件所属的 Node 上面派发出来的，需要用 node.on 来监听。

Details

属性（properties）

content

可滚动展示内容的节点。

horizontal

是否开启水平滚动。

vertical

是否开启垂直滚动。

inertia

是否开启滚动惯性。

brake

开启惯性后，在用户停止触摸后滚动多快停止，0表示永不停止，1表示立刻停止。

elastic

是否允许滚动内容超过边界，并在停止触摸后回弹。

bounceDuration

回弹持续的时间，0 表示将立即反弹。

horizontalScrollBar

水平滚动的 ScrollBar。

verticalScrollBar

垂直滚动的 ScrollBar。

scrollEvents

滚动视图的事件回调函数

cancelInnerEvents

如果这个属性被设置为 true，那么滚动行为会取消子节点上注册的触摸事件，默认被设置为 true。 注意，子节点上的 touchstart 事件仍然会触发，触点移动距离非常短的情况下 touchmove 和 touchend 也不会受影响。

__eventTargets

Register all related EventTargets, all event callbacks will be removed in _onPreDestroy

node

该组件被附加到的节点。组件总会附加到一个节点。

示例

cc.log(comp.node);

uuid

组件的 uuid，用于编辑器。

示例

cc.log(comp.uuid);

_enabled

enabled

表示该组件自身是否启用。

示例

comp.enabled = true;
cc.log(comp.enabled);

enabledInHierarchy

表示该组件是否被启用并且所在的节点也处于激活状态。

示例

cc.log(comp.enabledInHierarchy);

_isOnLoadCalled

返回一个值用来判断 onLoad 是否被调用过，不等于 0 时调用过，等于 0 时未调用。

示例

cc.log(this._isOnLoadCalled > 0);

_name

_objFlags

name

该对象的名称。

示例

obj.name = "New Obj";

isValid

表示该对象是否可用（被销毁后将不可用）。

示例

cc.log(obj.isValid);

方法

scrollToBottom

视图内容将在规定时间内滚动到视图底部。

参数列表

• timeInSecond Number Scroll time in second, if you don't pass timeInSecond, the content will jump to the bottom boundary immediately.
• attenuated Boolean Whether the scroll acceleration attenuated, default is true.

示例

// Scroll to the bottom of the view.
scrollView.scrollToBottom(0.1);

scrollToTop

视图内容将在规定时间内滚动到视图顶部。

参数列表

• timeInSecond Number Scroll time in second, if you don't pass timeInSecond, the content will jump to the top boundary immediately.
• attenuated Boolean Whether the scroll acceleration attenuated, default is true.

示例

// Scroll to the top of the view.
scrollView.scrollToTop(0.1);

scrollToLeft

视图内容将在规定时间内滚动到视图左边。

参数列表

• timeInSecond Number Scroll time in second, if you don't pass timeInSecond, the content will jump to the left boundary immediately.
• attenuated Boolean Whether the scroll acceleration attenuated, default is true.

示例

// Scroll to the left of the view.
scrollView.scrollToLeft(0.1);

scrollToRight

视图内容将在规定时间内滚动到视图右边。

参数列表

• timeInSecond Number Scroll time in second, if you don't pass timeInSecond, the content will jump to the right boundary immediately.
• attenuated Boolean Whether the scroll acceleration attenuated, default is true.

示例

// Scroll to the right of the view.
scrollView.scrollToRight(0.1);

scrollToTopLeft

视图内容将在规定时间内滚动到视图左上角。

参数列表

• timeInSecond Number Scroll time in second, if you don't pass timeInSecond, the content will jump to the top left boundary immediately.
• attenuated Boolean Whether the scroll acceleration attenuated, default is true.

示例

// Scroll to the upper left corner of the view.
scrollView.scrollToTopLeft(0.1);

scrollToTopRight

视图内容将在规定时间内滚动到视图右上角。

参数列表

• timeInSecond Number Scroll time in second, if you don't pass timeInSecond, the content will jump to the top right boundary immediately.
• attenuated Boolean Whether the scroll acceleration attenuated, default is true.

示例

// Scroll to the top right corner of the view.
scrollView.scrollToTopRight(0.1);

scrollToBottomLeft

视图内容将在规定时间内滚动到视图左下角。

参数列表

• timeInSecond Number Scroll time in second, if you don't pass timeInSecond, the content will jump to the bottom left boundary immediately.
• attenuated Boolean Whether the scroll acceleration attenuated, default is true.

示例

// Scroll to the lower left corner of the view.
scrollView.scrollToBottomLeft(0.1);

scrollToBottomRight

视图内容将在规定时间内滚动到视图右下角。

参数列表

• timeInSecond Number Scroll time in second, if you don't pass timeInSecond, the content will jump to the bottom right boundary immediately.
• attenuated Boolean Whether the scroll acceleration attenuated, default is true.

示例

// Scroll to the lower right corner of the view.
scrollView.scrollToBottomRight(0.1);

scrollToOffset

视图内容在规定时间内将滚动到 ScrollView 相对左上角原点的偏移位置, 如果 timeInSecond参数不传，则立即滚动到指定偏移位置。

参数列表

• offset Vec2 A Vec2, the value of which each axis between 0 and maxScrollOffset
• timeInSecond Number Scroll time in second, if you don't pass timeInSecond, the content will jump to the specific offset of ScrollView immediately.
• attenuated Boolean Whether the scroll acceleration attenuated, default is true.

示例

// Scroll to middle position in 0.1 second in x-axis
var maxScrollOffset = this.getMaxScrollOffset();
scrollView.scrollToOffset(cc.p(maxScrollOffset.x / 2, 0), 0.1);

getScrollOffset

获取滚动视图相对于左上角原点的当前滚动偏移

getMaxScrollOffset

获取滚动视图最大可以滚动的偏移量

scrollToPercentHorizontal

视图内容在规定时间内将滚动到 ScrollView 水平方向的百分比位置上。

参数列表

• percent Number A value between 0 and 1.
• timeInSecond Number Scroll time in second, if you don't pass timeInSecond, the content will jump to the horizontal percent position of ScrollView immediately.
• attenuated Boolean Whether the scroll acceleration attenuated, default is true.

示例

// Scroll to middle position.
scrollView.scrollToBottomRight(0.5, 0.1);

scrollTo

视图内容在规定时间内进行垂直方向和水平方向的滚动，并且滚动到指定百分比位置上。

参数列表

• anchor Vec2 A point which will be clamp between cc.p(0,0) and cc.p(1,1).
• timeInSecond Number Scroll time in second, if you don't pass timeInSecond, the content will jump to the percent position of ScrollView immediately.
• attenuated Boolean Whether the scroll acceleration attenuated, default is true.

示例

// Vertical scroll to the bottom of the view.
scrollView.scrollTo(cc.p(0, 1), 0.1);

// Horizontal scroll to view right.
scrollView.scrollTo(cc.p(1, 0), 0.1);

scrollToPercentVertical

视图内容在规定时间内滚动到 ScrollView 垂直方向的百分比位置上。

参数列表

• percent Number A value between 0 and 1.
• timeInSecond Number Scroll time in second, if you don't pass timeInSecond, the content will jump to the vertical percent position of ScrollView immediately.
• attenuated Boolean Whether the scroll acceleration attenuated, default is true. // Scroll to middle position. scrollView.scrollToPercentVertical(0.5, 0.1);

stopAutoScroll

停止自动滚动, 调用此 API 可以让 Scrollview 立即停止滚动

setContentPosition

设置当前视图内容的坐标点。

参数列表

• position Vec2 The position in content's parent space.

getContentPosition

获取当前视图内容的坐标点。

isScrolling

用户是否在拖拽当前滚动视图

isAutoScrolling

当前滚动视图是否在惯性滚动

update

如果该组件启用，则每帧调用 update。

参数列表

• dt Number the delta time in seconds it took to complete the last frame

lateUpdate

如果该组件启用，则每帧调用 LateUpdate。

__preload

__preload is called before every onLoad. It is used to initialize the builtin components internally, to avoid checking whether onLoad is called before every public method calls. This method should be removed if script priority is supported.

onLoad

当附加到一个激活的节点上或者其节点第一次激活时候调用。onLoad 总是会在任何 start 方法调用前执行，这能用于安排脚本的初始化顺序。

start

如果该组件第一次启用，则在所有组件的 update 之前调用。通常用于需要在所有组件的 onLoad 初始化完毕后执行的逻辑。

onEnable

当该组件被启用，并且它的节点也激活时。

onDisable

当该组件被禁用或节点变为无效时调用。

onDestroy

当该组件被销毁时调用

onFocusInEditor

onLostFocusInEditor

resetInEditor

用来初始化组件或节点的一些属性，当该组件被第一次添加到节点上或用户点击了它的 Reset 菜单时调用。这个回调只会在编辑器下调用。

addComponent

向节点添加一个组件类，你还可以通过传入脚本的名称来添加组件。

参数列表

• typeOrClassName Function | String the constructor or the class name of the component to add

示例

var sprite = node.addComponent(cc.Sprite);
var test = node.addComponent("Test");

getComponent

获取节点上指定类型的组件，如果节点有附加指定类型的组件，则返回，如果没有则为空。
传入参数也可以是脚本的名称。

参数列表

• typeOrClassName Function | String

示例

// get sprite component.
var sprite = node.getComponent(cc.Sprite);
// get custom test calss.
var test = node.getComponent("Test");

getComponents

返回节点上指定类型的所有组件。

参数列表

• typeOrClassName Function | String

示例

var sprites = node.getComponents(cc.Sprite);
var tests = node.getComponents("Test");

getComponentInChildren

递归查找所有子节点中第一个匹配指定类型的组件。

参数列表

• typeOrClassName Function | String

示例

var sprite = node.getComponentInChildren(cc.Sprite);
var Test = node.getComponentInChildren("Test");

getComponentsInChildren

递归查找自身或所有子节点中指定类型的组件

参数列表

• typeOrClassName Function | String

示例

var sprites = node.getComponentsInChildren(cc.Sprite);
var tests = node.getComponentsInChildren("Test");

_getLocalBounds

如果组件的包围盒与节点不同，您可以实现该方法以提供自定义的轴向对齐的包围盒（AABB）， 以便编辑器的场景视图可以正确地执行点选测试。

参数列表

• out_rect Rect the Rect to receive the bounding box

onRestore

onRestore 是用户在检查器菜单点击 Reset 时，对此组件执行撤消操作后调用的。

如果组件包含了“内部状态”（不在 CCClass 属性中定义的临时成员变量），那么你可能需要实现该方法。

编辑器执行撤销/重做操作时，将调用组件的 get set 来录制和还原组件的状态。 然而，在极端的情况下，它可能无法良好运作。
那么你就应该实现这个方法，手动根据组件的属性同步“内部状态”。 一旦你实现这个方法，当用户撤销或重做时，组件的所有 get set 都不会再被调用。 这意味着仅仅指定了默认值的属性将被编辑器记录和还原。

同样的，编辑可能无法在极端情况下正确地重置您的组件。
于是如果你需要支持组件重置菜单，你需要在该方法中手工同步组件属性到“内部状态”。
一旦你实现这个方法，组件的所有 get set 都不会在重置操作时被调用。 这意味着仅仅指定了默认值的属性将被编辑器重置。
此方法仅在编辑器下会被调用。

schedule

调度一个自定义的回调函数。
如果回调函数已调度，那么将不会重复调度它，只会更新时间间隔参数。

参数列表

• callback function The callback function
• interval Number Tick interval in seconds. 0 means tick every frame.
• repeat Number The selector will be executed (repeat + 1) times, you can use cc.macro.REPEAT_FOREVER for tick infinitely.
• delay Number The amount of time that the first tick will wait before execution.

示例

var timeCallback = function (dt) {
  cc.log("time: " + dt);
}
this.schedule(timeCallback, 1);

scheduleOnce

调度一个只运行一次的回调函数，可以指定 0 让回调函数在下一帧立即执行或者在一定的延时之后执行。

参数列表

• callback function A function wrapped as a selector
• delay Number The amount of time that the first tick will wait before execution.

示例

var timeCallback = function (dt) {
  cc.log("time: " + dt);
}
this.scheduleOnce(timeCallback, 2);

unschedule

取消调度一个自定义的回调函数。

参数列表

• callback_fn function A function wrapped as a selector

示例

this.unschedule(_callback);

unscheduleAllCallbacks

取消调度所有已调度的回调函数：定制的回调函数以及 'update' 回调函数。动作不受此方法影响。

示例

this.unscheduleAllCallbacks();

destroy

销毁该对象，并释放所有它对其它对象的引用。
销毁后，CCObject 不再可用。您可以在访问对象之前使用 cc.isValid(obj) 来检查对象是否已被销毁。 实际销毁操作会延迟到当前帧渲染前执行。

示例

obj.destroy();

_destruct

Clear all references in the instance.

NOTE: this method will not clear the getter or setter functions which defined in the instance of CCObject. You can override the _destruct method if you need, for example: _destruct: function () { for (var key in this) { if (this.hasOwnProperty(key)) { switch (typeof this[key]) { case 'string': this[key] = ''; break; case 'object': case 'function': this[key] = null; break; } } }

_onPreDestroy

Called before the object being destroyed.

_serialize

The customized serialization for this object. (Editor Only)

参数列表

• exporting Boolean

_deserialize

Init this object from the custom serialized data.

参数列表

• data Object the serialized json data
• ctx _Deserializer

事件

scroll-to-top Event

模块: cc

注意：此事件是从该组件所属的 Node 上面派发出来的，需要用 node.on 来监听。

索引

Details

scroll-to-bottom Event

模块: cc

注意：此事件是从该组件所属的 Node 上面派发出来的，需要用 node.on 来监听。

索引

Details

scroll-to-left Event

模块: cc

注意：此事件是从该组件所属的 Node 上面派发出来的，需要用 node.on 来监听。

索引

Details

scroll-to-right Event

模块: cc

注意：此事件是从该组件所属的 Node 上面派发出来的，需要用 node.on 来监听。

索引

Details

scrolling Event

模块: cc

注意：此事件是从该组件所属的 Node 上面派发出来的，需要用 node.on 来监听。

索引

Details

bounce-bottom Event

模块: cc

注意：此事件是从该组件所属的 Node 上面派发出来的，需要用 node.on 来监听。

索引

Details

bounce-top Event

模块: cc

注意：此事件是从该组件所属的 Node 上面派发出来的，需要用 node.on 来监听。

索引

Details

bounce-left Event

模块: cc

注意：此事件是从该组件所属的 Node 上面派发出来的，需要用 node.on 来监听。

索引

Details

bounce-right Event

模块: cc

注意：此事件是从该组件所属的 Node 上面派发出来的，需要用 node.on 来监听。

索引

Details

scroll-ended Event

模块: cc

注意：此事件是从该组件所属的 Node 上面派发出来的，需要用 node.on 来监听。

索引

Details

touch-up Event

模块: cc

注意：此事件是从该组件所属的 Node 上面派发出来的，需要用 node.on 来监听。

索引

Details

scroll-began Event

模块: cc

注意：此事件是从该组件所属的 Node 上面派发出来的，需要用 node.on 来监听。

索引

Details