zoukankan      html  css  js  c++  java
  • LayaBox入门基础之JS代码实现按钮增加功能

    2.2.3 实现List增加功能

    ​ 实现List增加,需要用到LayaAir引擎laya.display.Sprite中的事件侦听on()方法对鼠标点击事件CLICK进行侦听,以及laya.ui.List API中添加单元格数据源的方法addItem();

    ​ 25
    ​ (图25)

    ​ 26
    ​ (图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
    ​ (图27)实现列表增加效果

  • 相关阅读:
    HTML 列表中的dl,dt,dd,ul,li,ol区别及应用
    JS中关于clientWidth offsetWidth scrollWidth 等的含义
    关于javascript中dataset的问题小结
    AMD CMD ,requirejs seajs 区别
    [if IE ]>与<![endif]
    windows下实现wamp与tomcat环境整合
    webstorm 设置jsp支持
    js获取客户端IP及地理位置
    AngularJS所有版本下载地址
    jQuery插件开发全解析
  • 原文地址:https://www.cnblogs.com/hqutcy/p/10103928.html
Copyright © 2011-2022 走看看