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

ScrollView 组件

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

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

ScrollView 属性

属性	功能说明
content	它是一个节点引用，用来创建 ScrollView 的可滚动内容，通常这可能是一个包含一张巨大图片的节点。
Horizontal	布尔值，是否允许横向滚动。
Vertical	布尔值，是否允许纵向滚动。
Inertia	滚动的时候是否有加速度。
Brake	浮点数，滚动之后的减速系数。取值范围是 0-1，如果是 1 则立马停止滚动，如果是 0，则会一直滚动到 content 的边界。
Elastic	布尔值，是否回弹。
Bounce Duration	浮点数，回弹所需要的时间。取值范围是 0-10。
Horizontal ScrollBar	它是一个节点引用，用来创建一个滚动条来显示 content 在水平方向上的位置。
Vertical ScrollBar	它是一个节点引用，用来创建一个滚动条来显示 content 在垂直方向上的位置
ScrollView Events	列表类型，默认为空，用户添加的每一个事件由节点引用，组件名称和一个响应函数组成。详情见 'Scrollview 事件' 章节
CancelInnerEvents	如果这个属性被设置为 true，那么滚动行为会取消子节点上注册的触摸事件，默认被设置为 true。

ScrollView 事件

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

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节点设置全屏幕

属性	值
left	0 px
right	0 px
top	0 px
bottom	0 px

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

属性	值
left	0 px
top	0 px

Layout组件中设置

属性	值	说明
Resize Mode	CONTAINER	对容器的大小进行缩放，就是content根据子节点的大小来自动调整大小全部显示出子节点

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

属性	值
left	0 px
right	0 px

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

• 设置ScrollBarV的属性，如图

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

属性	值
w	12
H	～（任意）
right	0 px
top	0 px

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

属性	值
w	10
H	30

• 设置ScrollBarH的属性，如图

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

属性	值
w	～（任意）
H	12

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

属性	值
w	30
H	10
left	0 px
bottom	0 px

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

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

文章整理并自习自：

官方文档

个人博客地址

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