Basic List Example

Showcase of a vertical list populated with 100 text rows.

import { _decorator, Component, Label, Node, instantiate, Prefab } from 'cc';
import { VirtualViewList } from 'assets/Script/Core/VirtualList/VirtualViewList';

const { ccclass, property } = _decorator;

@ccclass('BasicListExample')
export class BasicListExample extends Component {
  @property(Prefab)
  itemPrefab: Prefab | null = null;

  private data: string[] = [];

  onLoad() {
    this.data = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`);
  }

  start() {
    const list = this.node.getComponent(VirtualViewList)!;

    list.RegisterTemplate('default', () => this.createItemNode(), true);

    list.SetCallbacks({
      onItemInit: (node, index) => this.updateItem(node, index),
      onItemUpdate: (node, index) => this.updateItem(node, index)
    });

    const types = this.data.map(() => 'default');
    list.ReloadData(types);
  }

  private createItemNode(): Node {
    return this.itemPrefab ? instantiate(this.itemPrefab) : new Node('Item');
  }

  private updateItem(node: Node, index: number) {
    const label = node.getComponent(Label);
    if (label) {
      label.string = this.data[index];
    }
  }
}

Steps:

1. Attach VirtualViewList to the content node of a ScrollView.
2. Add this script to the same node and assign itemPrefab (optional).
3. Run the scene to preview the virtual list in action.