版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/z_x_Qiang/article/details/86601064
场景的搭建
这里所说的场景就是每一个页面的显示效果
1.进入编辑模式,进入UI视图的编辑界面;
2.在项目下的空白区域,右击-->新建-->页面/场景
3.拖动指定的UI到视图区域
关于这些资源的命名:
以下面的开头,加_xxx即可;
背景:bg
按钮:button 或者btn
选框:checkbox
文本标签:label
文本输入框:textinput
小技巧:图片的缩放会压缩,可以使用shift 按住+缩放 不会压缩;
4.组件举例:
var 是给这个主键取一个引用名
sizeGrid 9宫格设置拉伸
还有其他的很多属性;
5.导出
当页面已经布局好了,记得导出 F12;
会在代码模式下的
6.js继承,获取相应的组件对象
在src-》ui-》layaUI.max.all.js 文件中就会有我们编辑的场景自动生成的代码,如下;
我们可以继承上面的代码,来实现我们的逻辑
定义于给LoginUIView类
let LoginUIView = (function(_super){
function LoginUIView(){
LoginUIView.super(this);
this.btn_register.on(Laya.Event.CLICK,this,this.btnRegisterListener);
this.btn_login.on(Laya.Event.CLICK,this,this.btnLoginListener);
}
Laya.class(LoginUIView,"LoginUIView",_super);//设置继承关系,继承LoginUI;
LoginUIView.prototype.btnRegisterListener=function(){
console.log("注册");
let dialog=new AlterDialogView();
dialog.popup();
};
LoginUIView.prototype.btnLoginListener = function(){
console.log("登录");
let dialog=new AlterDialogView();
dialog.popup();
}
return LoginUIView;
})(LoginUI);