Cocos制作动态生成内容的列表

一、创建空节点，或者直接创建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);
    }
}

七、运行测试