使用的开发工具是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');
	});
}
Logo

这里是一个专注于游戏开发的社区,我们致力于为广大游戏爱好者提供一个良好的学习和交流平台。我们的专区包含了各大流行引擎的技术博文,涵盖了从入门到进阶的各个阶段,无论你是初学者还是资深开发者,都能在这里找到适合自己的内容。除此之外,我们还会不定期举办游戏开发相关的活动,让大家更好地交流互动。加入我们,一起探索游戏开发的奥秘吧!

更多推荐