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

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

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

实现一个简单的滚动加载代码也不需要很多，滚动加载的主要信息都能通过API获得，示例如下：

// 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');
	});
}