【CocosCreator入门】CocosCreator组件 | ScrollView(滚动视图)组件

news/2024/5/18 13:08:15 标签: CocosCreator, typescript, 游戏程序, 游戏引擎, cocos2d

       Cocos Creator 是一款流行的游戏开发引擎,具有丰富的组件和工具,其中的ScrollView组件是一种用于实现滚动视图效果的重要组件。它可以让我们在游戏中实现各种滚动视图效果,例如列表、地图等。


目录

一、组件介绍

二、组件属性

三、详细说明

四、脚本示例


一、组件介绍

       ScrollView组件是Cocos Creator提供的一种用于实现滚动视图效果的组件。通过设置ScrollView组件的属性和事件,可以实现各种不同的滚动视图效果,例如滚动方向、滚动条显示等。

二、组件属性

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

ScrollView组件有许多常用属性,包括:

滚动方向

       滚动方向是ScrollView组件的一个重要属性,它表示ScrollView组件的滚动方向。在Cocos Creator中,ScrollView组件支持水平滚动和垂直滚动两种方向。

滚动速度

       滚动速度是ScrollView组件的一个重要属性,它表示ScrollView组件的滚动速度。在设置滚动速度时,需要根据实际需求来选择合适的数值。

惯性滑动

       惯性滑动是ScrollView组件的一个重要属性,它表示ScrollView组件是否支持惯性滑动。开启惯性滑动后,用户在松开手指后ScrollView组件会自动滑动一段距离,从而实现更加流畅的滚动效果。

弹性滑动

       弹性滑动是ScrollView组件的一个重要属性,它表示ScrollView组件在滚动到边缘时是否支持弹性滑动。开启弹性滑动后,用户在滚动到边缘时ScrollView组件会自动弹回一定的距离,从而实现更加自然的滚动效果。

三、详细说明

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

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

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

四、脚本示例

       下面是一个使用ScrollView组件实现滚动视图效果的示例代码:

cc.Class({
    extends: cc.Component,
    properties: {
        scrollViewNode: cc.Node, // ScrollView节点
        contentNode: cc.Node, // ScrollView内容节点
    },
    onLoad () {
        let scrollView = this.scrollViewNode.getComponent(cc.ScrollView);
        scrollView.content = this.contentNode;
        scrollView.node.on('scroll-to-top', this.onScrollToTop, this);
        scrollView.node.on('scroll-to-bottom', this.onScrollToBottom, this);
    },
    onScrollToTop (event) {
        console.log('Scroll To Top');
    },
    onScrollToBottom (event) {
        console.log('Scroll To Bottom');
    },
});

       通过以上代码,我们可以动态地创建一个ScrollView节点,并添加ScrollView组件。在实际开发中,可以根据需要修改和扩展代码。 


       总之,使用Cocos Creator的ScrollView组件可以帮助我们实现各种滚动视图效果,例如列表、地图等。通过设置ScrollView组件的属性和事件,可以实现各种不同的滚动视图效果,例如滚动方向、滚动条显示等。


http://www.niftyadmin.cn/n/247119.html

相关文章

这款产品,竟然用了几千多年才爆火?

春秋时期,淄博的临淄作为齐国都城,称得上是当时山东最繁华的地方。任世事沧桑巨变,在小透明了两千多年后,淄博又迎来了新的繁华:这次,淄博烧烤火出圈了! (图源bilibili纪录片《人生…

Linux 内核调优部分参数说明

表示尽量使用内存,减少使用磁盘 swap 交换分区,内存速度明显高于磁盘一个数量级。 vm.swappiness 0内存分配策略,Redis 持久化存储需设置值为1。 vm.overcommit_memory 10:表示内核将检查是否有足够的可用内存供应用进程使用&…

Windows逆向安全(一)之基础知识(十五)

指针二 先前介绍了指针的一些基本的知识,但都没有提到地址的概念,下面承接之前的笔记,继续学习指针 下面要介绍三个相关的内容:获取变量的数据类型 、 取变量地址和取地址中存储的数据 获取变量的数据类型 在C语言中可以使用下…

mulesoft MCIA 破釜沉舟备考 2023.04.18.15

mulesoft MCIA 破釜沉舟备考 2023.04.18.15 1. A trading company handles millions of requests a day.2. An organization has chosen Mulesoft for their integration and API platform.3. An organization has implemented the cluster with two customer hosted Mule runt…

基于AT89C52单片机的温度检测报警设计

点击链接获取Keil源码与Project Backups仿真图: https://download.csdn.net/download/qq_64505944/87708680?spm1001.2014.3001.5503 源码获取 主要内容: 本系统的设计主要是了解了单片机微型计算机,根据现实生活的需要以及已掌握的理论知识…

2. 算法分析

2. 算法分析 研究算法的最终目的就是如何花更少的时间,如何占用更少的内存去完成相同的需求。 我们要计算算法时间耗费情况,首先我们得度量算法的执行时间,那么如何度量呢? 2.1 算法的时间复杂度分析 事后分析估算方法&#x…

Python无框架分布式爬虫,爬取范例:拼多多商品详情数据,拼多多商品列表数据

拼多多是中国领先的社交电商平台之一,是一家以“团购折扣”为主要运营模式的电商平台。该平台上有海量的商品,对于商家和消费者来说都具有非常大的价值,因此,拼多多商品数据的采集技术非常重要。本文将介绍拼多多商品数据的采集技…

Java web 项目 和 java 项目的区别

一、Java Web项目 和 java项目区别 1. Java Web项目是基于Java EE类的;而Java项目是基于Java应用程序的。 2. Java Web项目是网页的编码,像jsp,servlet,struts这类的,而java项目是AWT,SWING这类的编码。 3. Java Web项目中的JAVA文件是tomcat…