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();

 

最终实现效果如下图：