使用的开发工具是
CocosCreator
,版本为3.6
。学习笔记,新人入坑,欢迎指点
当要显示多条数据时,一般会使用滚动视图组件ScrollView
,这样当数据量大时就可以滚动了。当然这仅限数据量小的情况,如果要展示是数据量很大,不可能一次性请求几百条然后硬塞到ScrollView
中,那么滚动加载是不可避免的。文章来源:https://www.toymoban.com/news/detail-519372.html
实现一个简单的滚动加载代码也不需要很多,滚动加载的主要信息都能通过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模板网!