CCVirtualGridList - Cocos Creator 虚拟列表

CCVirtualGridList - Cocos Creator 虚拟列表,第1张

CCVirtualGridList是基于Cocos Creator ScrollView + Layout 编写的一个具有 虚拟布局特点 的滚动列表控制容器。支持平滑滚动显示大量数据对象,元素可以实现 异步按帧加载 保证滚动平滑 具有滚动翻页功能 自适应宽度显示多列 单项选择 局部更新 等实用功能。

Cocos Creator 引擎中提供了一个常规的滚动控制容器——ScrollView,实现基本滚动控制。但是缺少与之配合的List控件来实现虚拟布局功能,需要开发者手动扩展,在这里就提供一个实现虚拟布局功能的扩展列表控件,是参照Egret中的List控件的接口方式来实现。

虚拟布局的原理其实很简单,就是只加载和显示可视区域的列表内容,可视区域外的并没有实体控件被实例化。以滚动事件驱动,动态滚动并复用可视区域内的列表模板,切换数据显示,看上去像一个完整的列表在上下滚动,由于此种设计实例化控件少,所以内存占用极少,drawcall数量低而且稳定,所以现在被普遍应用。但是虚拟布局的核心不仅在于此,由于需要不停地切换显示内容,如何将素材转换的更快速,更平滑才是虚拟列表的关键。CCVirtualGridList在VirtualGridListBaseItem 中提供自己的加载的方法——loadImage,实现异步按帧加载,保证列表滚动流畅度,又能有效利用缓存。

使用控件非常简单,只需要拷贝demo项目中三个文件VirtualGridListprefab,VirtualGridListjs,VirtualGridListBaseItemjs 到您的工程中Prefabs文件夹中即可。使用之前将VirtualGridListprefab拖入画面中, 列表单元控制组件继承 VirtualGridListBaseItem 就可以。

启动参数可以在creator 图形化界面填入,但是为了不受预制体的维护影响,建议通过初 始化脚本接口传入启动参数。

首次创建显示列表, dataList为数据数组

追加显示列表, dataList为追加的数据数组,适用于滚动翻页

获取数据数组

获取显示对象列表

清空列表

根据数据对象查找对应的显示对象,当开启虚拟列表的时候,返回对象可能不存在

获取缓存

注册滚动至底部回调方法 当useVirtualList=false 时不可用

修改数据后,刷新列表显示,some代表指定刷新的对象, 不传则刷新全部。

判断是否滚动至顶部

滚动至顶部

滚动到固定位置 itemIndex代表滚动至指定显示对象的索引, sec为滚动动画时长

数据对象。来自要显示的数据列表中的一条,每一条显示单元控件,都对应一条数据对象,当useVirtualLayout= true 的时候,单元控件对应的data数据对象不固定,会滚动切换。

子类可覆盖方法,自定义显示方法,当滚动交替或初始化的时候触发。当useVirtualLayout= true 的时候,每一个显示单元控件都是滚动复用的,所以对应的Component组件也是复用的,所以不要在其内部记录与某一条数据对应的变量或属性。

获取现实对象在队列中的索引

子类可覆盖方法,点选触发事件,只支持单选

子类可覆盖方法,如果当前为选中状态,当其他单元被点选触发此事件

子类可覆盖方法,当控件滑动离开可视区的时候触发 当useVirtualList=false 时不可用

子类可覆盖方法,当控件滑动进入可视区的时候触发 当useVirtualList=false 时不可用

VirtualGridList 提供的异步加载, 自动缓存。pic: 地址, cb: 加载后的回调方法,thisObj: 回调方法this对象

使用 $nextTick 方法解决问题

vue官网$nextTick方法介绍

为了在数据变化之后等待 Vue 完成更新 DOM,可以在数据变化之后立即使用 VuenextTick(callback)。这样回调函数将在 DOM 更新完成后被调用

vue虚拟列表没渲染出来获取高度

查看全部1个回答

百度网友8692d82

2023-01-19 贡献了超过503个回答

关注

使用 $nextTick 方法解决问题

vue官网$nextTick方法介绍

为了在数据变化之后等待 Vue 完成更新 DOM,可以在数据变化之后立即使用 VuenextTick(callback)。这样回调函数将在 DOM 更新完成后被调用

回答于 2023-01-19

以上就是关于CCVirtualGridList - Cocos Creator 虚拟列表全部的内容,包括:CCVirtualGridList - Cocos Creator 虚拟列表、vue虚拟列表没渲染出来获取高度、vue虚拟列表获取行高等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/9406579.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-28
下一篇 2023-04-28

发表评论

登录后才能评论

评论列表(0条)

保存