大家好，我是曉衡！

今天，推薦一款頗有顏值的虛擬列表組件，不然真的被埋沒就可惜了！

我們先來看下效果：

感覺怎么樣？還不錯吧！

為什么說這個資源差點被埋沒呢？因為個朋友找到曉衡詢問，有沒優化過的 ScrollView 能支持 grid 的？

很多人都知道，引擎自帶的 ScrollView 功能有限，特別是新手，要將它玩轉還真的不太容易。可能用跑是跑起來了，但那體驗卻是各種糟心，很容易被老板、用戶罵娘。

這位朋友問對人了，因為上周我才在 Cocos Store 上發現上面這個虛擬列表(XY)，體驗了一下效果很是 nice！

我立即在Store上一搜過起來，居然沒找出來。

我連續使用了ScrollView、View、Scroll 這三個搜索詞都不行。

可我當時一下子記不得它叫什么名字了，只好打開資源列表，一頁一頁地翻。

我硬是找了五六分鐘才找到，還好我記得它的圖標，有點帶治愈卡通風格，很容易識別。

不過，這里需要提醒大家，一定要善用 Cocos Store 后臺商品編輯中的關鍵字功能，看下面這張圖：

其實作者還是有心的，寫有這么多關鍵詞，可唯獨少了ScrollView。用戶也可以根據應用場景，多嘗試幾個關鍵詞。

下面，我們再來看看這款 ScrollView 虛擬列表到底有些什么不同？

功能特點

首先要贊一下虛擬列表(XY)支持2.x\3.x引擎，以下是主要功能點：

• 支持分頁模式

• 支持動態節點大小

• 支持瀑布流布局

• 支持同列表下多種節點類型

• 支持分區布局模式

• 支持列表嵌套

• 支持旋轉木馬布局樣式

• 提供 3D 畫廊布局思路

• 業務清晰，高度可擴展性，注釋詳細，徹底搞懂工作原理

• 自定義: 布局業務完全分離，支持自定義列表的布局排列方式

• 自定義: 提供實時修改節點變換的方法，目前支持實時調整自定義節點的 偏移，縮放，旋轉，層級，透明度

使用方法

下面是作者提供的使用方法步驟：

• 創建一個新節點

• 給節點掛載 YXCollectionView 組件

• 確定列表內一共需要展示多少條內容

  this.collectionView.numberOfItems?=?()?=>?this.testData.length

• 通過 YXCollectionView 組件注冊列表上需要顯示的節點，可多次注冊，支持同列表不同類型的節點，確保 identifier 唯一就好

  this.collectionView.register(`custom?identifier`,?()?=>?instantiate(this.cellPrefab))

• 根據實際數據，返回對應的已經注冊過的節點，可通過 indexPath 區分數據

  this.collectionView.cellForItemAt?=?(indexPath,?collectionView)?=>?{return?collectionView.dequeueReusableCell(`custom?identifier`)
  }

• 更新節點內容

  this.collectionView.onCellDisplay?=?(cell,?indexPath,?collectionView)?=>?{let?rowData?=?this.testData[indexPath.item]cell.getChildByName(`Label`).getComponent(Label).string?=?`${rowData.value}`
  }

• 根據實際布局情況，配置一個合適的 YXLayout 布局對象

  let?layout?=?new?YXFlowLayout()
  layout.scrollDirection?=?YXFlowLayout.ScrollDirection.VERTICAL
  layout.itemSize?=?new?math.Size(600,?200)
  layout.verticalSpacing?=?20
  this.collectionView.layout?=?layout

• 刷新列表

  this.collectionView.reloadData()

在線體驗

說了這么多，最好還是自己去體驗感受一下！

Cocos Creator 2.4.13 在線演示項目

• https://568071718.github.io/cocos-creator-build/collection-view/2.4.13

Cocos Creator 3.8.0 在線演示項目

• https://568071718.github.io/cocos-creator-build/collection-view/3.8.0

作者Cocos論壇技術帖

• https://forum.cocos.org/t/topic/157984

Cocos Store下載地址：

• https://store.cocos.com/app/detail/6249

今天的分享就到這里，曉衡的愿景是幫助1000名開發者，獨立掙錢10W+。如果你有Cocos Creator的游戲、工具、教程分享，歡迎加我微信！

ChatGPT-4o來了！使用WildCard一分鐘極速體驗

關不住啊！最新6個爆款小游戲源碼上新！

微信小游戲分包最佳實踐

微信暢玩榜我發現暗藏的幾個驚天大秘！

500+免費CC0游戲模型素材點擊領取！