CCVirtualGridList - Cocos Creator 虚拟列表

Posted 2023-03-09

参考技术A

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

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

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

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

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

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

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

获取数据数组

获取显示对象列表

清空列表

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

获取缓存图片

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

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

判断是否滚动至顶部

滚动至顶部

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

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

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

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

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

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

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

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

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