【组件】Cocos Creator 组件List (附Demo)

版本: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;

    /**列表选项类 */
    @
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值