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: numberlimit: numberonLoad() {this.page = 1this.limit = 10this.isEnd = truethis.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 nickNamelet 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 timelet 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 对容器大小进行缩放剩下不用修改就可以成了

cocos 3.6.1 实现排名列表相关推荐

CSS/HTML5带数字简洁大方的Top10排名列表
带数字Top10排名列表说明 Index与css代码演示图说明演示效果分辨率为1980x1080分辨率效果高度可定制修改纯css代码控制 Index与css代码 <!DOCTYPE ...
cocos 制作动态生成内容的列表_零代码工具，让你在线轻松制作交互内容！
在工作中设计师不会写代码,懂代码的不会设计,2种不同工作互掐的情况屡见不鲜,那我们如何把这2项工作一并融合贯通呢?对于不懂代码的职场"小白",我们可以利用一些零代码工具来完成.今天 ...
Core Journal Ranking 2020 期刊排名列表
CORE (Computing Research & Education)Ranking期刊排名是一种国际上较为认可的对计算领域期刊的评估,排名由澳大利亚CORE执行委员会管理,定期对期刊进行 ...
Core Conference Ranking 2020 会议排名列表
CORE (Computing Research & Education)Ranking会议排名是一种国际上较为认可的对计算领域会议的评估,排名由澳大利亚CORE执行委员会管理,定期对会议进行 ...
计算机软件专业全球排名,全国高校按计算机软件专业排名列表
# 1楼 18月前到这个连接: ---------------------------- 2004中国大学研究生院3个计算机专业(二级学科)排名 1.计算机系统结构排名学科代码:081201 排名 ...
TNNLS 22｜分数不是关键，排名才是关键：针对排行榜的模型“行为”保持与灾难性遗忘的克服...
本文认为对于类增量学习任务而言,单个点在特征空间的位置不是关键,它们之间距离值也不是关键,它们两两距离的排序才是重中之重.为此我们提出了一种新的类增量学习模型并设计了一个可导的排序算法,已被 IEEE ...
AAAI 2021 | 学习截断信息检索排序列表
©PaperWeekly 原创 · 作者|金金单位|阿里巴巴研究实习生研究方向|推荐系统论文标题: Learning to Truncate Ranked Lists for Informati ...
ML.NET 示例：搜索引擎结果排名
ML.NET 示例中文版:https://github.com/feiyun0112/machinelearning-samples.zh-cn/edit/master/samples/csharp/ ...
文科本二计算机类大学排名,全国二本大学排名文科分数线
第1篇:全国二本大学排名文科分数线文科生在报考学校的时候应该怎么选择学校呢?今天小编带大家了解一下二本文科学校的排名以及分数线,以供参考! 更多相关文章推荐: 1.计算机*大学排名 2.2017应用 ...

cocos 3.6.1 实现排名列表

cocos 3.6.1 实现排名列表相关推荐

最新文章

热门文章