15.cocos creator简易排行榜列表

1.创建空白项目, 新建标准文件夹 res,scripts,scenes

2.创建scrollView节点

3. 调整content位置并修改conent节点宽度与view节点宽度一致

4. 调整item, 新建sprite节点

 

5.将头像资源移动到res文件夹下, 新建avator(头像)节点并调整

6.创建label节点

7.在content节点添加layout组件

8. 创建预制体

至此UI部分已完成

代码实现预制体循环添加

game_scene.js

// Learn cc.Class:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/class.html
//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/class.html
// Learn Attribute:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html
//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html
//  - [English] https://www.cocos2d-x.org/docs/creator/manual/en/scripting/life-cycle-callbacks.html

cc.Class({
    extends: cc.Component,

    properties: {
        // foo: {
        //     // ATTRIBUTES:
        //     default: null,        // The default value will be used only when the component attaching
        //                           // to a node for the first time
        //     type: cc.SpriteFrame, // optional, default is typeof default
        //     serializable: true,   // optional, default is true
        // },
        // bar: {
        //     get () {
        //         return this._bar;
        //     },
        //     set (value) {
        //         this._bar = value;
        //     }
        // },

        item_prefab: {
            default: null,
            type: cc.Prefab,
        },

    },

    // LIFE-CYCLE CALLBACKS:

    onLoad () {
        this.scr = this.node.getChildByName("scrollView").getComponent(cc.ScrollView);
        console.log(this.scr);
        for(var i = 0; i < 10; i++) {
            var opt_item = cc.instantiate(this.item_prefab); //实例化一个预制体
            this.scr.content.addChild(opt_item);
        }
    },

    start () {

    },

    // update (dt) {},
});

运行