版本:2.3.4
实际效果:
Egret类似,采用List+ListItem组成的列表,Demo:https://files-cdn.cnblogs.com/files/gamedaybyday/cocos2.3.4_ListViewDemo.7z
Laya类似,使用renderHandler回调的List:https://files-cdn.cnblogs.com/files/gamedaybyday/cocos2.3.4_ListViewDemo.zip
cocos没有List组件,所以要自己写。
从cocos的example项目中找到listView的demo来改造
新修改的ListView对比原来有以下改动:
1. 去掉了totalCount、spawnCount和bufferZone的计算,根据实际情况自动计算合适的值。
2. 增加了列表项数据的传入和刷新。例如排行榜做列表,可以传入排行榜数据[{rank:1,name:"啊",{rank:2,name:"啦"},...}]来显示。
3. 将ListViewCtrl和ScrollView两个Node,合成一个Node,做成prefab,并拖动到自定义控件区域,以备复用。
4. 去掉了addItem和removeItem,列表项由传入的data决定。
5. 增加了ListItem类来处理data数据的显示。
UI结构如下图:
对比cocos example的,ListView所有UI在一个节点上,方便做成预制件。
ListView类:
import ListItem from "./ListItem";
const {ccclass, property} = cc._decorator;
/**
* 列表
* 根据cocos_example的listView改动而来
* @author chenkai 2020.7.8
*/
@ccclass
export default class ListView extends cc.Component {
/**列表选项 */
@property(cc.Node)
public item:cc.Node = null;
/**列表选项类 */
@