CocosCreator | 清單元件ListComponent

​擷取源碼

      關注微信公衆号，發送【清單】擷取源碼。

使用場景 

      遊戲中經常會做清單類型的功能，例如遊戲記錄、排行榜，涉及到的資料很多，如果使用自帶的ScrollView，會需要建立很多清單項元件，效率會很低，也很影響性能，由于工作中使用到的比較多，就封裝了一個元件ListComponent，大緻實作原理如下：

1. 在清單可見區域内，建立清單項Unit，清單項多餘可見區+1；
2. 設定需要更新的資料，儲存在元件内，一開始從第一條開始顯示，直到顯示能顯示的清單項；
3. 滑動清單項，更新不斷的更改清單項的位置和内容，進而實作滑動的效果。

存在問題

也有一些問題，如：

1. 滑動太快會不流暢，是以元件内取消了彈性功能；
2. 進度條的長度動态計算沒有加入，是以取消了進度條的顯示；

元件使用

具體使用步驟如下：

1. 把ListComponent挂在到ScrollView元件上，如下圖所示：
2. 清單項的預制和清單項預制上負責更新的腳本名稱設定好；
3. 預制腳本需要添加reloadUI(data:any)方法，為了更新UI。

下圖就是挂在腳本的效果：

下圖是自己項目的更新UI的函數：

       這裡根據自己的需要更新UI就行，傳進來的data是一個對象類型的資料結構。

       功能子產品使用起來也很簡單，如ScrollView元件的名稱為list，使用方法如下：

let data = [{name:'aa', age:1}, {name:'bb', age:2}];              let listCom = list.getComponent('ListComponent');              listCom .reloadData(data);              listCom reloadUI();
           

最終實作效果如下圖：