高性能虚拟列表

本组件提供了一整套虚拟列表解决方案，适用于需要展示大量数据的场景，确保列表在高性能和低消耗下流畅运行。

开发环境

• 引擎版本：Cocos Creator 3.x/2.x
• 编程语言：TypeScript

适配平台

微信小游戏	Android原生	iOS原生	抖音小游戏	OPPO小游戏	vivo小游戏
✔	✔	✔	✔	✔	✔

效果展示

• 多种布局，节点复用
  
  

• 支持多模板模式
  

• 动态调整Item尺寸
  

• 定向跳转，动态居中
  

• 更新指定Item数据
  

• 动态插入Item到指定位置
  

• 动态删除指定位置的Item
  

体验地址

网页版-虚拟列表在线体验

主要功能点

• 使用简单：使用简洁，注释清晰
  

• 多种布局：垂直、水平、网格、多模板布局
  

• 自适应刷新频率: 减少运算，提高性能
  

• 自定义缓存区大小: 提前加载，避免卡顿
  

• 自适应性能参数：性能参数，自适应计算
  

• 自定义模板：注册不同模板类型
  

• 分帧加载：通过分帧加载技术，避免一次性加载大量数据导致的性能问题，确保界面流畅。

• 节点池管理：使用节点池管理机制，复用节点，减少频繁创建和销毁节点带来的性能开销。

• 防抖动处理：在滚动事件中加入防抖动处理，避免频繁触发更新操作，提高性能。

• 动态修改Item数据并更新：支持动态修改列表项的数据，并实时更新显示内容。

• 动态修改Item尺寸：支持动态修改列表项的尺寸，并自动调整布局。

• 高度复用：通过节点池和分帧加载机制，实现节点的高度复用，减少内存占用。

• 低Drawcall：优化渲染流程，减少Drawcall次数，提高渲染性能。

使用教程

1. 初始化虚拟列表
   

2. 数据驱动刷新列表
   

3. 触发Item回调
   

常用接口

• ReloadData：重载数据，刷新列表
  
• InsertItemAt：指定位置插入Item
  
• RemoveItemAt：指定位置删除Item
  
• RegisterTemplate: 注册Item模板
  
• ScrollToIndex：滚动到指定索引项，使该项出现在屏幕正中央
  
• UpdateItemSize：更新指定索引项的尺寸
  
• UpdateItemAt：更新指定索引项的数据
  
• Refresh：刷新列表数据或尺寸变化后调用
  

题外话

• Q：为什么用【白菜】作为Item的ICON🥬
• A：白菜价格，仅供大家一起学习交流

论坛交流

cocos 论坛交流

cocos 技术细节分享

联系作者

👽 个人主页： 星空技术探索

😆 作者微信： Chrass-

💕 加入组织：联系作者，成为朋友，欢迎加入星空技术小栈，大家伙一起 讨论技术、摸鱼炒谷、爬山徒步、露营野炊，欢乐无限

更新声明

1.5.0

• 网格布局支持动态插入
• 网格布局支持动态删除
• 动态插入和删除支持动画参数
• 新增Clear接口

1.4.0

• 支持多模板虚拟列表
• 支持列表动态插入
• 支持列表动态删除
• 修复销毁虚拟列表报错问题

1.3.0

• 修复快速滚动出现的闪屏问题
• 修复滚动底部异常问题
• 调整性能参数，快速滚动时提高帧率
• 优化分帧加载策略，只在必要时启动

1.2.0

• 新增预加载缓冲区设定
• 自适应刷新频率提高性能
• 优化Demo代码
• 换肤提高品质

1.1.0

• 支持网格布局
• 组件选项优化处理

1.0.0

• 初始版本发布
• 实现基本的虚拟列表功能
• 支持动态修改Item数据和尺寸
• 新增分帧加载功能
• 优化节点池管理机制
• 增加防抖动处理

版权声明

本插件由作者独立开发，版权归作者所有。仅限于购买者个人或公司内部使用，禁止未经授权的传播和商业使用。

源码传送门

高性能虚拟列表