ScrollView 组件参考

    scrollview-inspector

    点击属性检查器下面的添加组件按钮,然后从添加 UI 组件中选择ScrollView,即可添加 ScrollView 组件到节点上。

    滚动视图的脚本接口请参考。

    属性 功能说明
    Target 带有脚本组件的节点。
    Component 脚本组件名称。
    Handler 指定一个回调函数,当 ScrollView 的事件发生的时候会调用此函数。
    CustomEventData 用户指定任意的字符串作为事件回调的最后一个参数传入。

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

    ScrollView 组件必须有指定的 content 节点才能起作用,通过指定滚动方向和 content 节点在此方向上的长度来计算滚动时的位置信息,Content 节点也可以通过UIWidget设置自动 resize。

    通常一个 ScrollView 的节点树如下图:

    ScrollBar 是可选的,你可以选择只设置水平或者垂直 ScrollBar,当然也可以两者都设置。

    建立关联可以通过在层级管理器里面拖拽一个带有 ScrollBar 组件的节点到 ScrollView 的相应字段完成。

    通过脚本代码添加回调

    方法一

    这种方法添加的事件回调和使用编辑器添加的事件回调是一样的,通过代码添加,
    你需要首先构造一个 cc.Component.EventHandler 对象,然后设置好对应的 target, component, handler 和 customEventData 参数。

    方法二

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

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

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