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) {}
}

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

预制体内部结构如下

滚动组件和item的样式在预制体里自行调整，目前只支持垂直从上往下滚动。
完成效果如下

可以看到我们插入了1000条数据 但是draw call 始终是没变的。