用JavaScript语言实现List代码逻辑
2.1 显示制作的UI页面
2.1.1 创建一个ListDemo.js程序文件,并把对应的js在index.html入口设置为启动文件。
(图17)
2.1.2 编辑代码,显示UI。
我们先引入加载以及UI类,然后加载显示UI用到的图集资源,最后实例UI界面并添加到舞台。下面通过编码实现这三个环节:
(function()
{
//------>用于显示UI组件
var Stage= Laya.Stage; //定义变量Stage为Laya的封装好的Stage
var Handler= Laya.Handler;
var Loader= Laya.Loader;
var Event = Laya.Event; //点击鼠标的时候事件监听需要引用这个包
var WebGL= Laya.WebGL;
var CheckBox = Laya.CheckBox; //实现多选框checkbox功能需要导入Laya提供的包
var ListDemoView; //定义整个界面的UI为一个变量
var arr;
(function()
{
Laya.init(640,1136,WebGL); //Laya引擎的初始化
Laya.stage.bgColor = "#ffffff";
//设置为缩放模式
Laya.stage.scaleMode = Stage.SCALE_SHOWALL;
//预加载资源文件(图集路径根据自己的项目实际情况定)后执行回调
Laya.loader.load(["res/atlas/comp.atlas","res/atlas/template/ButtonTab.atlas"],Handler.create(this,onLoaded));
})();
//要执行的回调函数
function onLoaded(){
ListDemoView = new ListPageUI(); //这个ListPageUI类是在layaUI.max.all.js中发布UI的时候自动生成的
Laya.stage.addChild(ListDemoView); //这舞台中添加这个ListPage的UI组件
//获取List模拟数据,并渲染
getListData();
//侦听增加按钮点击事件
ListDemoView.add.on(Event.CLICK,this,onAddClick);
//on()方法:四个入参,一个返回值;入参:type:事件的类型,caller:事件侦听函数的执行域,listener:事件侦听函数,args:事件侦听函数的回调参数
//返回值:EventDispatcher :此EventDispatcher对象
//侦听删除按钮点击事件
ListDemoView.del.on(Event.CLICK,this,onRemoveClick);
}
//<------用于显示UI组件
Tips:代码中的图集路径要根据自己的项目实际情况,灵活调整
2.1.3 编码完成后,按F5运行,如图18所示,页面显示和IDE制作的效果一致后,开始编辑逻辑代码。
(图18)