cocos creator实例--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();

 

最终实现效果如下图:

^随风~~
发布了309 篇原创文章 · 获赞 13 · 访问量 1万+
私信 关注

本文链接http://element-ui.cn/news/show-1737.aspx