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) {},
});
运行