ScrollView 组件参考

Mask组件配合使用，同时也可以添加ScrollBar组件来显示浏览内容的位置。 属性检查器下面的添加组件按钮，然后从添加 UI 组件中选择ScrollView，即可添加 ScrollView 组件到节点上。 ScrollView API。

ScrollView 属性

ScrollView 事件

Scrollview 的事件回调有两个参数，第一个参数是 ScrollView 本身，第二个参数是 ScrollView 的事件类型。

详细说明

UIWidget设置自动 resize。 通常一个 ScrollView 的节点树如下图： 这里的 Viewport 用来定义一个可以显示的滚动区域，所以通常 Mask 组件会被添加到 Viewport 上。可以滚动的内容可以直接放到 content 节点或者添加节 content 的子节点上。

ScrollBar 设置

ScrollBar 是可选的，你可以选择只设置水平或者垂直 ScrollBar，当然也可以两者都设置。 层级管理器里面拖拽一个带有 ScrollBar 组件的节点到 ScrollView 的相应字段完成。

通过脚本代码添加回调

方法一

你需要首先构造一个 cc.Component.EventHandler 对象，然后设置好对应的 target, component, handler 和 customEventData 参数。

  1. var scrollViewEventHandler = new cc.Component.EventHandler();scrollViewEventHandler.target = this.node; //这个 node 节点是你的事件处理代码组件所属的节点scrollViewEventHandler.component = "cc.MyComponent"scrollViewEventHandler.handler = "callback";scrollViewEventHandler.customEventData = "foobar";scrollview.scrollEvents.push(scrollViewEventHandler);//here is your component filecc.Class({    name: 'cc.MyComponent'    extends: cc.Component,    properties: {    },    //注意参数的顺序和类型是固定的    callback: function(scrollview, eventType, customEventData) {        //这里 scrollview 是一个 Scrollview 组件对象实例        // 这里的 eventType === cc.ScrollView.EventType enum 里面的值        //这里的 customEventData 参数就等于你之前设置的 "foobar"    }});
方法二

scrollview.node.on('scroll-to-top', ...) 的方式来添加

  1. //假设我们在一个组件的 onLoad 方法里面添加事件处理回调，在 callback 函数中进行事件处理:cc.Class({    extends: cc.Component,    properties: {       scrollview: cc.ScrollView    },    onLoad: function () {       this.scrollview.node.on('scroll-to-top', this.callback, this);    },    callback: function (event) {       //这里的 event 是一个 EventCustom 对象，你可以通过 event.detail 获取 ScrollView 组件       var scrollview = event.detail;       //do whatever you want with scrollview       //另外，注意这种方式注册的事件，也无法传递 customEventData    }});

同样的，你也可以注册 ‘scrolling’, ‘touch-up’ , ‘scrolling’ 等事件，这些事件的回调函数的参数与 ‘scroll-to-top’ 的参数一致。

关于完整的 ScrollView 的事件列表，可以参考 ScrollView 的 API 文档。

ScrollBar 组件参考。