【cocos笔记】记录一次实现ScrollView滚动加载的过程

这篇具有很好参考价值的文章主要介绍了【cocos笔记】记录一次实现ScrollView滚动加载的过程。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

使用的开发工具是CocosCreator,版本为3.6。学习笔记,新人入坑,欢迎指点

当要显示多条数据时,一般会使用滚动视图组件ScrollView,这样当数据量大时就可以滚动了。当然这仅限数据量小的情况,如果要展示是数据量很大,不可能一次性请求几百条然后硬塞到ScrollView中,那么滚动加载是不可避免的。

实现一个简单的滚动加载代码也不需要很多,滚动加载的主要信息都能通过API获得,示例如下:文章来源地址https://www.toymoban.com/news/detail-519372.html

// 1、定义全局变量,存储当前已经发起的请求次数和需要请求的次数(真实场景变量应该定义在class中)
let requestCount: number = 0; // 请求次数
let loadCount: number = 1; // 加载数据次数,初始为1,因为必定请求一次接口的
// 模拟接口返回
const mock = {
	list: [],
	pageSize: 20,
	total: 100
};

// 2、获取滚动距离,判断是否触底,触底就发送请求
const scrollView = this.node.getChildByPath('path').getComponent(ScrollView); // 获取ScrollView组件
const maxScrollOffset = scrollView.getMaxScrollOffset().y; // 最大滚动偏移量
const scrollOffset = scrollView.getScrollOffset().y; // 当前滚动偏移量

requestCount = Math.ceil(mock.total / mock.pageSize); // 向上取整,需要请求次数
// 如果没有加载完数据,并且触底,就加载数据
if (loadCount < requestCount && maxScrollOffset === scrollOffset) {
	// 发送请求
	this.getList();
}

// 3、渲染列表
async function getList() {
	// 3.1: 发送请求
	const { list, total } = await request();
	// 3.2: 请求发送成功,loadCount++
	loadCount += 1;
	// 3.3:拼接数据
	mock.list = [...mockList, ...list];
	// 3.4: 渲染滚动列表内容
	this.renderList();
}

function renderList() {
	// 3.5: 获取滚动列表容器
	const wrapper = this.node.getChildByPath('path');
	// ...省略加载预设体等一堆逻辑
	mock.list.forEach(item => {
		// ...给预设体填充数据
		// 3.6: 将内容插入到滚动列表
		wrapper.addChild('生成的预设体Node');
	});
}

到了这里,关于【cocos笔记】记录一次实现ScrollView滚动加载的过程的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Android 的 ScrollView (滚动条)

    本节带来的是Android基本UI控件中的第十个: ScrollView (滚动条),或者我们应该叫他 竖直滚动条,对应的另外一个水平方向上的滚动条: HorizontalScrollView ,先来一发官方文档 的链接:ScrollView,我们可以看到类的结构如下: 嘿嘿,原来是一个FrameLayout的容器,不过在他的基础上

    2024年02月12日
    浏览(39)
  • unity scrollview滚动到指定的位置

    方法一:通过下标 方法二:原文1 原文2 方法一没测试 这里给方法二增加注释理解 图1 图2 图3 图4

    2024年01月20日
    浏览(44)
  • Swift 让ScrollView滚动到具体某个位置

    1. 使用 scrollToItem 方法滚动集合视图 上述代码中,首先使用 scrollToItem 方法将集合视图滚动到第一条数据(左侧对齐),然后在稍后的延迟时间后,再次使用 scrollToItem 方法将其滚动到最后一条数据(左侧对齐)。 2. 使用 setContentOffset 方法来滚动集合视图 上述代码中,我们使

    2024年02月15日
    浏览(39)
  • 微信小程序 scrollview 滚动到指定位置

    在微信小程序中,实现 ScrollView 滚动到指定位置有多种方法,下面将介绍三种主要的实现方式。 通过设置 scroll-view 组件的 scroll-top 属性,我们可以实现滚动到指定位置。以下是具体实现方式: 滚动逻辑: 在上述代码中,scroll-top是一个动态数据,通过手动改变scroll-top的值来

    2024年02月04日
    浏览(38)
  • Unity ScrollView循环滚动播放(有详细注释)

    首先创建一个ScrollView在UI上 在Content上挂载脚本,将ScrollView赋值给Parent。 当Content的高度大于ScrollView的容量高度时便开始滚动。 以下是脚本代码: 效果如下(结尾和开头会停留1秒):

    2024年02月07日
    浏览(42)
  • 【Android Studio】常用布局 --- 滚动视图ScrollView

    问题引入 :手机屏幕的显示空间有限,常常需要上下滑动或左右滑动才能拉出其余页面内容,可惜一般的布局节点 都不支持自行滚动,这时就要借助滚动视图了。与线性布局类似,滚动视图也分为垂直方向和水平方向 两类,其中垂直滚动视图名为ScrollView,水平滚动视图名为

    2023年04月11日
    浏览(42)
  • 记录一次Linux下ChatGLM部署过程

    本地化的GPT就是香,就是有点费钱。 项目地址:https://github.com/THUDM/ChatGLM-6B 由于本地电脑显卡都不行,所以我租了AutoDL的一台算力服务器。 Tesla T4 16G 显存,56GB内存,符合我们跑ChatGLM的配置。 其实本来这台服务器是其他用途,跑vits的,所以选择了so-vits-svc4的 镜像 ,这类的

    2024年02月09日
    浏览(45)
  • 小程序中的canvas不跟随scrollView滚动

    问题原因,官方文件说明:canvas为原生组件故有一下的性质: 原文链接:https://blog.csdn.net/qq_25740691/article/details/81867382 解决方法1:看看是不是给最外层标签page定义了height:100%的属性或者overflow相关的属性,如果是的话去掉。检查你的canvas的所有父级元素是否设置了height:1

    2024年02月06日
    浏览(40)
  • 记录一次开机内存分析的全过程

    作者:zzy的学习笔记 记录一次开机内存分析的全过程,尽量详尽的介绍常用内存分析工具和命令行的使用,结合具体问题探讨开机内存分析的实践经验。通过这篇文章我会介绍开机内存的常用测试分析工具的基本使用方法,以及如何通过抓取出来的内存数据得出下一步的分析

    2024年02月07日
    浏览(44)
  • 千兆宽带只剩下百兆了,记录一次排查过程

    事情是这样的:昨晚PUBG有大更新,但是下载的时候我突然发现速度只剩下10M/s左右了,用speedtest测了下只剩下了百兆宽带,我家明明是千兆宽带的。然后就开始了排查,没想到这一搞就是3小时。 这是排查前我家的网络拓扑: 几点说明: 1.全部网络设备都是千兆口,还有几个

    2024年02月05日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包