ScrollView 组件

ScrollView 是一种带滚动功能的容器，它提供一种方式可以在有限的显示区域内浏览更多的内容。通常 ScrollView 会与Mask组件配合使用，同时也可以添加ScrollBar组件来显示浏览内容的位置。

点击 属性检查器 下面的 添加组件 按钮，然后从添加 UI组件中选择ScrollView，即可添加ScrollView组件到节点上。
滚动视图的脚本借口请参考
ScrollView API

ScrollView 属性

ScrollView 事件

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

详细说明

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

通常的一个ScrollView的节点树如下：

这里的View用来定义一个可以显示的滚动区域，所以通常Mask组件会被添加到View上面，滚动的内容可以直接放到content节点或者添加到content中的子节点上。

ScrollBar 设置

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

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

通过脚本代码添加回调

方法一

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

cc.Class({
    extends: cc.Component,

    properties: {

    },

    onLoad () {

        var scrollViewEventHandler = new cc.Component.EventHandler();
        scrollViewEventHandler.target = this.node; //这个 node 节点是你的事件处理代码组件所属的节点
        scrollViewEventHandler.component = "ScrollView1Script";//这个是脚本文件名
        scrollViewEventHandler.handler = "callback";
        scrollViewEventHandler.customEventData = "foobar";
        var scrollview = this.node.getComponent(cc.ScrollView);
        scrollview.scrollEvents.push(scrollViewEventHandler);


    },

    //注意参数的顺序和类型是固定的
    callback: function (scrollview, eventType, customEventData) {
        //这里 scrollview 是一个 Scrollview 组件对象实例
        //这里的 eventType === cc.ScrollView.EventType enum 里面的值
        //这里的 customEventData 参数就等于你之前设置的 "foobar"
        console.log(customEventData);
    }

});

方法二

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

//假设我们在一个组件的 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 就是ScrollView 组件
       //另外，注意这种方式注册的事件，也无法传递 customEventData
    }
});

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

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

ScrollView 的实例

文章开头的实例是怎么做出来的？

需要的资源:

• 网上下载的图片

步骤

第一步建立节点树操作

• 在层级管理器中添加一个新的UI组件ScrollView名为MyScrollView，节点树如下

• 将content其中的item删除，也可以直接在item上修改，我是直接删除，添加一个Scrite(精灵),将下载的图片拖到资源管理器，然后在将图片拖入到Scrite(精灵)中的Scrite Frame中

• 复制一份ScrollBar分别命名为ScrollBarV、ScrollBarH，竖向滚动条、横向滚动条

• 调整MyScrollView子节点的位置

节点树完成图如下

第二部创建Widget对齐组件、自动布局

• 在MyScrollView节点上添加widget对齐挂件，设置全屏幕

• View节点设置全屏幕

• content节点的widget以左上角对齐，并添加Layout组件设置Resize Mode

Layout组件中设置

• Scrite中设置 left = 0 px right = 0 px 这个是为了保证运行以后界面显示的图片是从左上角开始显示

设置content中节点树中的的属性检查器

• 设置ScrollBarV的属性，如图

竖向滚动，并且是靠右边，上下对齐，通俗一点，最右边一竖条
size 主要设置宽度 w = 12

• 设置ScrollBarV中的子节点bar，添加widget组件,bar的size

• 设置ScrollBarH的属性，如图

  横向滚动，并且是靠左边，左右对齐，通俗一点，最下边一横条 size 主要设置高度 H = 12

• 设置ScrollBarV中的子节点bar，添加widget组件,bar的size

最后一步设置MyScrollView的属性检查器

设置完成以后运行程序，在浏览器中就可以看到在文章开头看到的Gif图

文章整理并自习自：

官方文档

个人博客地址

玩溜Cocos Creator入门学习（四）UI系统介绍UI组件（ScrollView）