Cocos creator 3.8.3 无限滚动列表

Cocos creator 3.8.3 无限滚动列表

封装一个无限滚动的列表,以后要用的时候免得重复写。
自定义滚动项的类继承Item类

//item数据 可以是自定义数据类 或者是由protobuf解析出来的数据对象
class MyData{
 icon:string = 'icon1'
 name:string = '数据1'
 others:number[] = [1,2,3,4,5]
 } 
 
class MyItem extends Item<MyData>{
	/**重写item点击事件回调 处理自己的点击逻辑 */
  protected override itemClick(): void {
    console.log('Item 点击===>>>', this.index, this.data)
  }
   /**重写ui初始化方法 初始化自己的ui逻辑 */
  protected override initUI(): void {
    this.node.getChildByName('Label').getComponent(Label).string = this.index.toString()
  }
}

//应用
@ccclass('GameStart')
export class GameStart extends Component {
  @property(Node)
  private scrollNode: Node

  start() {
    let scroll = this.scrollNode.getComponent(ScrollViewEx)
    scroll.init(8, 4, MyItem)
    let arr = []
    for (let i = 0; i < 1000; ++i) {
      arr.push(new MyData())
    }

    scroll.refreshData(arr)
  }

  update(deltaTime: number) {}
}

调用ScrollViewExinit方法 传入预设的行和列以及自定义item的类型如上代码
调用数据刷新的接口refreshData传入要刷新的数据。

预制体内部结构如下

滚动组件和item的样式在预制体里自行调整,目前只支持垂直从上往下滚动。
完成效果如下
在这里插入图片描述
可以看到我们插入了1000条数据 但是draw call 始终是没变的。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值