虚拟列表排行榜 Demo

基于 Cocos Creator 3.8.6 的麻将消除游戏首页，核心演示了从零手写的虚拟列表排行榜功能。

运行环境

项目	版本
引擎	Cocos Creator 3.8.6
语言	TypeScript (strict: false)
平台	Web / 移动端

项目结构

assets/
├── prefabs/mahjong/
│   ├── RankItem.prefab          # 排行榜单项预制体（虚拟列表复用）
│   └── popup/RankPanel.prefab   # 排行榜弹窗预制体（包含虚拟列表 ScrollView）
└── scripts/mahjong/
    ├── MJRankManager.ts         # 排行榜虚拟列表管理器（核心）
    ├── MJRankItem.ts            # 排行榜单项组件
    ├── MJDataManager.ts         # 玩家数据管理（提供玩家分数用于排行榜插入）
    └── MJHomeManager.ts         # 首页控制器（控制排行榜面板的打开/关闭）

虚拟列表实现说明

排行榜基于 ScrollView + NodePool 手动实现虚拟列表，不依赖 Cocos Creator 内置的 VirtualList 或任何第三方插件。

核心原理

1. 内容伪装高度 — 将 ScrollView content 的 UITransform 高度设为整个列表的理论总高度，使滚动条正确反映数据量
2. 可见区域计算 — 根据当前滚动位置和可视区域高度，计算当前可见的数据索引范围，上下各加 bufferCount（默认 2 行）作为缓冲
3. 差量更新策略 — 滚动时仅对离开可见范围的节点进行回收，仍在范围内的节点不做任何操作，避免不必要的 CPU 计算和渲染开销
4. 对象池复用 — 使用 Cocos Creator 的 NodePool 管理节点生命周期，离开视野的节点回收到池中，进入视野时优先从池中获取
5. 滚动驱动渲染 — 监听 ScrollView.EventType.SCROLLING 事件，每次滚动触发可见项渲染，并使用 _isRefreshing 标志防止重入

数据结构

interface RankData {
    rank: number;   // 排名 (1-based)
    name: string;   // 昵称
    score: number;  // 分数
}

当前使用 Mock 数据（100 条），代码中已预留 TODO 标记，后续可无缝替换为服务端 API。

交互流程

首页 → 点击排行榜按钮 → 弹出排行榜面板
                           ├─ 加载数据，更新 content 高度
                           ├─ 渲染可见项
                           ├─ 用户滚动时差量更新可见项
                           └─ 支持平滑滚动到自己的排名

联系方式