精选_【Cocos Creator实战教程(7)】——UI组件（1）ScrollView 组件_源码打包

# 【Cocos Creator实战教程(7)】——UI组件（1）ScrollView 组件 # 1. 知识点讲解 ScrollView 是一种带滚动功能的容器，它提供一种方式可以在有限的显示区域内浏览更多的内容。通常 ScrollView 会与Mask组件配合使用，同时也可以添加ScrollBar组件来显示浏览内容的位置。 ## 1.1 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。 | ## 1.2 ScrollView 事件 | 属性 | 功能说明 | | --------------- | ------------------------------------- | | Target | 带有脚本组件的节点。 | | Component | 脚本组件名称。 | | Handler | 指定一个回调函数，当 ScrollView 的事件发生的时候会调用此函数。 | | CustomEventData | 用户指定任意的字符串作为事件回调的最后一个参数传入。 | Scrollview 的事件回调有两个参数，第一个参数是 ScrollView 本身，第二个参数是 ScrollView 的事件类型。 ## 1.3 详细说明 ScrollView组件必须有指定的content节点才能起作用，通过指定滚动方向和content节点再此方向长度来计算滚动时的位置信息，content节点也可以通过UIwidget设置自动resize。 通常的一个ScrollView的节点树如下：  这里的`View`用来定义一个可以显示的滚动区域，所以通常`Mask`组件会被添加到`View`上面，滚动的内容可以直接放到`content`节点或者添加到`content`中的子节点上。 ## 1.4 ScrollBar 设置 ScrollBar 是可选的，你可以选择只设置水平或者垂直 ScrollBar，当然也可以两者都设置。 建立关联可以通过在 层级管理器 里面拖拽一个带有 ScrollBar 组件的节点到 ScrollView 的相应字段完成。 ## 1.5 通过脚本代码添加回调 ### 1.5.1 方法一 这种方法添加的事件回调和使用编辑器添加的事件回调是一样的，通过代码添加， 你需要首先构造一个 cc.Component.EventHandler 对象，然后设置好对应的 target, component, handler 和 customEventData 参数。 ```javascript 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); } }); ``` ### 1.5.2 方法二 通过 scrollview.node.on(‘scroll-to-top’, …) 的方式来添加 ```javascript //假设我们在一个组件的 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 } }); ``` # 2. 步骤 ## 2.1 建立节点树操作 - 在`层级管理器`中添加一个新的UI组件`ScrollView`名为`NewScrollView`，节点树如下 - 将`content`其中的`item`删除，也可以直接在`item`上修改，我是直接删除，添加一个`Scrite(精灵)`,将下载的图片拖到资源管理器，然后在将图片拖入到`Scrite(精灵)`中的`Scrite Frame`中（原谅我放上了我最爱的偶吧——允浩） - 复制一份ScrollBar分别命名为`scrollBarV`、`scrollBarH`，横向滚动条、竖向滚动条 - 调整`New ScrollView`子节点的位置 节点树完成图如下  ## 2.2 创建Widget对齐组件、自动布局 - 在`New ScrollView`节点上添加`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`根据子节点的大小来自动调整大小全部显示出子节点 | ## 2.3 设置content中节点树中的的属性检查器 - 设置`ScrollBarV`的属性，如图  - 设置`ScrollBarH`的属性，如图  ## 2.4 设置`New ScrollView`的属性检查器  # 3. 总结 这里我们的游戏的菜单运用了这种方法，滑动可以玩两个游戏。请试试如何创建吧。 提示：  想想每个节点的大小都是多少，有做出来的可以在评论区写出来哦。 本资源部分素材来源于网络。