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）