《Cocos 游戏开发实战》6.2 列表与滚动容器

{
  "__type__": "cc.Node",
  "_name": "LevelList",
  "_components": [ { "__id__": 2 }, { "__id__": 3 } ],
  "_children": [
    {
      "__type__": "cc.Node",
      "_name": "view",
      "_components": [ { "__id__": 4 }, { "__id__": 5 } ],
      "_children": [
        {
          "__type__": "cc.Node",
          "_name": "content",
          "_components": [ { "__id__": 6 }, { "__id__": 7 } ]
        }
      ]
    }
  ]
}

import {
  _decorator, Component, Node, Prefab, instantiate, ScrollView, Label,
  Layout, JsonAsset, resources, assetManager,
} from 'cc';
const { ccclass, property } = _decorator;

interface LevelConfig {
  readonly id: number;
  readonly speed: number;
  readonly goalX: number;
}

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

  private content: Node | null = null;

  start(): void {
    this.content = this.scroll?.content ?? null;
    assetManager.loadBundle('bundle-levels', (err, bundle) => {
      if (err !== null || bundle === null) {
        console.warn('[LevelListBuilder] 分包加载失败', err);
        return;
      }
      bundle.load('configs/levels', JsonAsset, (e, asset) => {
        if (e !== null || asset === null) return;
        const raw = asset.json as unknown as LevelConfig[] | null;
        if (raw === null) return;
        this.build(raw);
      });
    });
  }

  private build(levels: readonly LevelConfig[]): void {
    const content = this.content;
    const prefab = this.itemPrefab;
    if (content === null || prefab === null) return;

    for (const lv of levels) {
      const item = instantiate(prefab);
      const label = item.getChildByName('Index')?.getComponent(Label);
      if (label) label.string = `第 ${lv.id} 关`;
      content.addChild(item);
    }
    // 一次性刷新布局，避免每个 addChild 都触发一次重排
    content.getComponent(Layout)?.updateLayout();
  }
}

import { _decorator, Component, Node, NodePool, Prefab, instantiate } from 'cc';
const { ccclass, property } = _decorator;

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

  private pool = new NodePool();
  private active: Node[] = [];

  /** 取一个列表项：优先复用池里的，池空则新建 */
  acquire(): Node | null {
    if (this.itemPrefab === null) return null;
    const reused = this.pool.get();
    const node = reused ?? instantiate(this.itemPrefab);
    this.active.push(node);
    return node;
  }

  /** 归还一个列表项：从父节点摘下后放回池 */
  recycle(node: Node): void {
    const i = this.active.indexOf(node);
    if (i >= 0) this.active.splice(i, 1);
    node.removeFromParent();
    this.pool.put(node);
  }

  /** 清空：关卡切换时释放全部缓存节点 */
  dispose(): void {
    this.pool.clear();
    this.active = [];
  }

  get poolSize(): number {
    return this.pool.size();
  }
}

import { _decorator, Component, ScrollView, Label } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('LevelListPager')
export class LevelListPager extends Component {
  @property(ScrollView) scroll: ScrollView | null = null;
  @property(Label) pageTip: Label | null = null;

  private page = 1;
  private readonly pageSize = 12;

  onEnable(): void {
    this.scroll?.node.on(ScrollView.EventType.SCROLL_ENDED, this.onScrollEnded, this);
  }

  onDisable(): void {
    this.scroll?.node.off(ScrollView.EventType.SCROLL_ENDED, this.onScrollEnded, this);
  }

  private onScrollEnded(): void {
    const view = this.scroll;
    if (view === null) return;
    const offset = view.getScrollOffset();
    const max = view.getMaxScrollOffset();
    // 滚到底部附近时自动翻页提示
    if (max.y > 0 && offset.y > max.y * 0.9) {
      this.page += 1;
      if (this.pageTip !== null) {
        this.pageTip.string = `已加载第 ${this.page} 页（每页 ${this.pageSize} 关）`;
      }
    }
  }

  backToTop(): void {
    this.scroll?.scrollToTop(0.2);
  }
}