cocos creator~ScrollView + Layout 组件完成自动排版

1) 为content加点添加Layout组件

cocos creator~ScrollView + Layout 组件完成自动排版_第1张图片

特别注意:

1.content组件的position为(x=0, y=view高度的 一半)  锚点为: (0.5, 1) 这样紧贴靠上

2.content上Layout要设置type和resize mode属性

3.可以调整Top的数值,这样让Item起始位置有所变化

2) 制作Prefab

cocos creator~ScrollView + Layout 组件完成自动排版_第2张图片

3)代码

cc.Class({
    extends: cc.Component,

    properties: {
        btn:{
            default: null,
            type: cc.Button
        },
        player_info_prefab:{
            default: null,
            type: cc.Prefab
        },

        scrollview:{
            default: null,
            type: cc.ScrollView
        }
    },

    // LIFE-CYCLE CALLBACKS:

    onLoad () {
     
    },

    // 
    start () {
        for(var i = 0; i < 20; i++){
            var player_info = cc.instantiate(this.player_info_prefab);
            this.scrollview.content.addChild(player_info);
        }
    },

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

4) 效果

cocos creator~ScrollView + Layout 组件完成自动排版_第3张图片

 

 

你可能感兴趣的:(【cocos,creator,2d】)