一、创建空节点,或者直接创建ScrollView
如果不想显示滚动条的可以将scrollBar组件隐藏掉,尽量不要删除,只做隐藏处理即可。
二、调整Scroll View组件大小
这里可以根据自己需求调整大小
同时修改view的大小
三、修改item样式并生成预制体
我这里直接创建了一个Layout组件,里边放了两个Label
Layout组件大小设置一下,增加Sprite组件为Layout增加背景
将Layout改名为TestItem,然后拖到prefab文件夹下生成item预制体,然后删除content下的item和TestItem
四、创建列表脚本
创建TestList脚本
在脚本中创建cntent节点,testItem预制体和testList的ScrollView
@ccclass('TestList')
export class TestList extends Component {
//ScrollView下的cntent
@property(Node)
cntent:Node = null!;
//制作的列表条目预制体
@property(Prefab)
testItem:Prefab = null!;
//ScrollView
@property(ScrollView)
testList:ScrollView = null!;
start() {
}
update(deltaTime: number) {
}
}
回到cocos场景编辑器,将脚本挂载到Scroll View组件上,再将对应的组件拖到对应的位置
五、在content组件上增加Layout组件
六、编写脚本,做虚拟数据展示
import { _decorator, Component, instantiate, Label, Node, Prefab, ScrollView } from 'cc';
const { ccclass, property } = _decorator;
@ccclass('TestList')
export class TestList extends Component {
@property(Node)
cntent:Node = null!;
@property(Prefab)
testItem:Prefab = null!;
@property(ScrollView)
testList:ScrollView = null!;
start() {
this.initData();
}
update(deltaTime: number) {
}
initData(){
console.log('设置数据');
for (let index = 0; index < 100; index++) {
const title = "标题"+index;
const time = "2023-12-"+index;
this.showList(title,time);
}
}
showList(title:string,time:string){
const item = instantiate(this.testItem);
item.getChildByName('title').getComponent(Label).string = title;
item.getChildByName('time').getComponent(Label).string = time;
this.cntent.addChild(item);
}
}
七、运行测试