LayaBox入门基础之JS代码实现UI组件显示

用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）