LayaBox入門基礎之JS代碼實現按鈕增加功能

2.2.3 實現List增加功能

​ 實現List增加，需要用到LayaAir引擎laya.display.Sprite中的事件偵聽on()方法對鼠標點擊事件CLICK進行偵聽，以及laya.ui.List API中添加單元格數據源的方法addItem()；

​ 
​ （圖25）

​ 
​ （圖26）

(function()
{
    var Handler= Laya.Handler;
    var Loader= Laya.Loader;
    var WebGL = Laya.WebGL;
    var Event   = Laya.Event;
    var Stage = Laya.Stage;
     var ListDemoView;
     var arr;
    (function()
    {
         Laya.init(640,1136,WebGL);
         Laya.stage.bgColor = "#ffffff";
         Laya.stage.scaleMode = Stage.SCALE_SHOWALL;
          //預加載資源文件后執行回調
         Laya.loader.load(["res/atlas/ListPage.atlas","res/atlas/template/ButtonTab.atlas"], Handler.create(this, onLoaded));
    })();
    function onLoaded(){
        ListDemoView = new ListPageUI();
        Laya.stage.addChild(ListDemoView);
        //獲得List模擬數據，並渲染
         getListData(); 
         //偵聽增加按鈕點擊事件
         ListDemoView.add.on(Event.CLICK,this,onAddClick);
    }
    function getListData(){
        //添加list數據
        arr = [];
        for (var i  = 1; i <= 30; i++) {
            arr.push({listNumber: {text:i}});
           }
        ListDemoView._list.vScrollBarSkin='';//添加list滾動條功能（UI不可顯示）
        ListDemoView._list.array = arr;//數據賦值
         //list渲染函數
          ListDemoView._list.renderHandler = new Handler(this, onRender);
    }
    function onRender(cell,index){
         //如果索引不再可索引范圍，則終止該函數
        if(index > arr.length)return;
        //獲取當前渲染條目的數據
        var data = arr[index];
        //根據子節點的名字listNumber，獲取子節點對象。         
        var listNumber = cell.getChildByName("listNumber") ;
        //label渲染列表文本（序號）
        listNumber.text=data.listNumber.text;
    }
      function onAddClick(){
         //添加單元格數據源
         ListDemoView._list.addItem({listNumber: {text:arr.length+1}});
    }
})();

 

​ 詳情直接查看代碼與注釋。

​ 代碼運行效果如圖27所示：

​ 
​ （圖27）實現列表增加效果