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虚拟列表获取行高等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)