高性能虛擬列表
本組件提供了一整套虛擬列表解決方案,適用于需要展示大量數據的場景,確保列表在高性能和低消耗下流暢運行。
開發環境
- 引擎版本:Cocos Creator 3.x/2.x
- 編程語言:TypeScript
適配平臺
| 微信小游戲 | Android原生 | iOS原生 | 抖音小游戲 | OPPO小游戲 | vivo小游戲 |
|---|---|---|---|---|---|
| ? | ? | ? | ? | ? | ? |
效果展示
-
多種布局,節點復用
![1.gif]()
![2.gif]()
-
支持多模板模式
![效果圖1.gif]()
-
動態調整Item尺寸
![3.gif]()
-
定向跳轉,動態居中
![4.gif]()
-
更新指定Item數據
![5.gif]()
-
動態插入Item到指定位置
![2.gif]()
-
動態刪除指定位置的Item
![3.gif]()
體驗地址
主要功能點
-
使用簡單:使用簡潔,注釋清晰
![6.jpg]()
-
多種布局:垂直、水平、網格、多模板布局
![7.jpg]()
-
自適應刷新頻率: 減少運算,提高性能
![8.jpg]()
-
自定義緩存區大小: 提前加載,避免卡頓
![9.jpg]()
-
自適應性能參數:性能參數,自適應計算
![10.jpg]()
-
自定義模板:注冊不同模板類型
![5.png]()
![6.png]()
-
分幀加載:通過分幀加載技術,避免一次性加載大量數據導致的性能問題,確保界面流暢。
-
節點池管理:使用節點池管理機制,復用節點,減少頻繁創建和銷毀節點帶來的性能開銷。
-
防抖動處理:在滾動事件中加入防抖動處理,避免頻繁觸發更新操作,提高性能。
-
動態修改Item數據并更新:支持動態修改列表項的數據,并實時更新顯示內容。
-
動態修改Item尺寸:支持動態修改列表項的尺寸,并自動調整布局。
-
高度復用:通過節點池和分幀加載機制,實現節點的高度復用,減少內存占用。
-
低Drawcall:優化渲染流程,減少Drawcall次數,提高渲染性能。
使用教程
-
初始化虛擬列表
![7.png]()
-
數據驅動刷新列表
![8.png]()
-
觸發Item回調
![9.png]()
常用接口
- ReloadData:重載數據,刷新列表
![image.png]()
- InsertItemAt:指定位置插入Item
![image.png]()
- RemoveItemAt:指定位置刪除Item
![image.png]()
- RegisterTemplate: 注冊Item模板
![image.png]()
- ScrollToIndex:滾動到指定索引項,使該項出現在屏幕正中央
![image.png]()
- UpdateItemSize:更新指定索引項的尺寸
![image.png]()
- UpdateItemAt:更新指定索引項的數據
![image.png]()
- Refresh:刷新列表數據或尺寸變化后調用
![image.png]()
題外話
- Q:為什么用【白菜】作為Item的ICON??
- A:白菜價格,僅供大家一起學習交流
論壇交流
聯系作者
?? 個人主頁: 星空技術探索
?? 作者微信: Chrass-
?? 加入組織:聯系作者,成為朋友,歡迎加入星空技術小棧,大家伙一起 討論技術、摸魚炒谷、爬山徒步、露營野炊,歡樂無限
更新聲明
1.5.0
- 網格布局支持動態插入
- 網格布局支持動態刪除
- 動態插入和刪除支持動畫參數
- 新增Clear接口
1.4.0
- 支持多模板虛擬列表
- 支持列表動態插入
- 支持列表動態刪除
- 修復銷毀虛擬列表報錯問題
1.3.0
- 修復快速滾動出現的閃屏問題
- 修復滾動底部異常問題
- 調整性能參數,快速滾動時提高幀率
- 優化分幀加載策略,只在必要時啟動
1.2.0
- 新增預加載緩沖區設定
- 自適應刷新頻率提高性能
- 優化Demo代碼
- 換膚提高品質
1.1.0
- 支持網格布局
- 組件選項優化處理
1.0.0
- 初始版本發布
- 實現基本的虛擬列表功能
- 支持動態修改Item數據和尺寸
- 新增分幀加載功能
- 優化節點池管理機制
- 增加防抖動處理
版權聲明
本插件由作者獨立開發,版權歸作者所有。僅限于購買者個人或公司內部使用,禁止未經授權的傳播和商業使用。



























浙公網安備 33010602011771號