cocos 3.6.1 实现排名列表

1.首先创建一个精灵把你们设计稿的列表背景放上去设置宽高（615宽, 880高）(600w,820h) 以上宽高均是我的设置

2.右键刚才上面创建的精灵创建 ScrollView滚动视图

3.创建完显示这样
scrollBar 是滚动条
view 是可视的区域
content 是放列表数据的区域块
item 是每一条数据 （注意这个后续要封装成prefab）

然后把滚动条隐藏，将 ScrollView 属性的 图片Sprite 这个组件删除，这个的如果你有需要你就设置，然后将设置 ScrollView 宽高 (600w，800h) ，ScrollView 内的 view 设置宽高 (600w,800h）再将 view 内的Content 设置宽高 (600w,820h) 以上宽高均是我的设置，你们需根据自己的需要修改微调。

4.之后将 item 布局成你们需要列表数据然后将item拉到下面 就变成frefab组件了

5.新建一个gameRanking.ts 内写上这些声明

6.然后点击 ScrollView 将滚动列表
ScrollView === rankingrolling
content === content
prefab === gameItem 就是你写的单条数据prefab

7.然后开始逻辑部分

import { _decorator, Component, Node, Prefab, instantiate, Label, SpriteFrame, Sprite, ImageAsset, Texture2D, assetManager, ScrollView } from 'cc';
const { ccclass, property } = _decorator;
@ccclass('gameRanking')
export class gameRanking extends Component {

    @property({ type: Node }) // 内容域
    content = null

    @property({ type: Prefab }) // 内容
    gameItem = null

    @property({ type: ScrollView }) // 滚动节点
    scrollGameList = null

    // 防抖
    isEnd: Boolean
    // page 页 limit 数量
    page: number
    limit: number

    onLoad() {
        this.page = 1
        this.limit = 10

        this.isEnd = true
        this.getGameList()
    }

    getGameList() {
        var httpRequest = new XMLHttpRequest();//第一步：创建需要的对象
        httpRequest.open('POST', "你们的请求数据接口", true); //第二步：打开连接
        httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");//设置请求头 注：post方式必须设置请求头（在建立连接后设置请求头）
        httpRequest.send(`page=${this.page}&limit=${this.limit}&token=${window.token}`); // 发送请求 
        httpRequest.onreadystatechange = () => {
            //验证请求是否发送成功
            if (httpRequest.readyState == 4 && httpRequest.status == 200) {
                var json = httpRequest.responseText;//获取到服务端返回的数据
                let { data } = JSON.parse(json)
                // 判断是否到底
                if (data.length < this.limit) {
                    this.isEnd = false
                }
                for (let i = 0; i < data.length; i++) {
                    this.gameRankingList(data[i], i + 1)
                }
            }
        };
       // 监听ScrollView触底事件
        this.scrollGameList.node.on('scroll-to-bottom', this.callback, this); 
    }
    // 上拉触底回调函数
    callback() {
        if (this.isEnd) {
            this.page++
            this.getGameList()
        }
    }
    // 每条数据的渲染
    gameRankingList(user: any, i: number) {
        // 获取块的实例
        let node = instantiate(this.gameItem);

        // 排名
        let sortNumber = node.getChildByName("labelNumber").getComponent(Label)
        sortNumber.string = i
        // set nickName
        let nickName = node.getChildByName('nickName').getComponent(Label);
        nickName.string = user.nickname;

        // 头像
        assetManager.loadRemote(user.avatar, { ext: '.png' }, function (err, texture: ImageAsset) {
            let avatarUrl = node.getChildByName("mask").children[0].getComponent(Sprite)
            avatarUrl.spriteFrame = SpriteFrame.createWithImage(texture)
        });

        // set time
        let tas = node.getChildByName('tas').getComponent(Label);
        tas.string = `通关时长：${user.game_level}`;

        // 将循环的数据添加到Content节点显示
        this.content.addChild(node)
    }
}

8.给你们讲解一下那个getChildByName省的看的一头雾水，就是你们每条数据渲染的拉到下面就变成prefab资源，然后ts代码中
let node = instantiate(this.gameItem); 就是获取这个封装的prefab资源的实例 然后 getChildByName 就是他的名字，然后getComponent() 就是获取组件 图片就是Sprite 文本就是Label

9.补充一下Layout布局 在Content 上新建 Layout 组件

10.Type = VERTOCAL 垂直向下排
Resize Mode = CONTAINER 对容器大小进行缩放 剩下不用修改 就可以成了