本組件提供了一整套虛擬列表解決方案，適用于需要展示大量數據的場景，確保列表在高性能和低消耗下流暢運行。

開發環境

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

適配平臺

效果展示

• 多種布局，節點復用
  
  

• 支持多模板模式
  

• 動態調整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數據和尺寸
• 新增分幀加載功能
• 優化節點池管理機制
• 增加防抖動處理

版權聲明

本插件由作者獨立開發，版權歸作者所有。僅限于購買者個人或公司內部使用，禁止未經授權的傳播和商業使用。

源碼傳送門

高性能虛擬列表