TabLayout是在APICloud现有窗口系统基础上升级的高级窗口组件。帮助您节省30%以上的重复编码工作量，同时为APP节省50%以上的系统资源开销，带来APP页面打开速度和应用性能的全面提升，助您开发漂亮的APP更快。使用tabLayout的主要优势1.减少代码，提高开发效率使用tabLayout只需要简单的配置参数就可以实现首页tabBar+frameGroup的整体布局，无需在窗口页面中编写header、footer标签和css样式来实现导航栏和标签栏，无需考虑适配状态栏和虚拟主页按钮。因此，可以将更多的时间花在具体业务的实现上，从而提高开发效率。2、加快页面打开速度，提高应用性能。在使用tabLayout实现导航栏时，由于导航栏是原生实现的，所以只需要开一个窗口页面就可以实现内容页面。相比之前的window+frame结构，减少了一个webView的开销，大大提高了页面打开速度，减少了应用程序的内存占用。tabLayout相关的方法请参考API文档。下面介绍tabLayout的基本使用：◆◆实现导航栏的navigationBar效果◆◆tabLayout封装了原有的导航栏，可以轻松实现页眉效果，导航栏会自动适配屏幕状态栏，身临其境.实现的代码只需要简单的几行：functionopenNavWin(){varparam={name:'nav',url:'./main_content.html',bgColor:'#fff',title:'navigationBar',navigationBar:{rightButtons:[{iconPath:"widget://image/more.png"}]}}api.openTabLayout(param);}导航栏按钮的点击事件，可以在opened监听事件页面处理：functionapiready(){api.addEventListener({name:'navbackbtn'},function(ret,err){alert('clickedthebackbutton');api.closeWin();});api.addEventListener({name:'navitembtn'},function(ret,err){if(ret.type=='right'){alert('点击右键');}});}◆◆实现tabBar效果◆◆tabLayout将tabBar控件和frameGroup组合在一起，tabLayout会自动管理tabBar项和对应的页面，tabBar会自动适配底部的虚拟home按钮。实现代码如下：functionopenNavTabWin(){varparam={name:'nav-tab',title:'nav-tab',bgColor:'#fff',slidBackEnabled:false,navigationBar:{hideBackButton:true},tabBar:{animated:true,list:[{text:"WeChat",iconPath:"widget://image/nav_tab_1.png",selectedIconPath:"widget://image/nav_tab_1_on.png"},{text:"通讯录音",iconPath:"widget://image/nav_tab_2.png",selectedIconPath:"widget://image/nav_tab_2_on.png"},{text:"Discovery",iconPath:"widget://image/nav_tab_3.png",selectedIconPath:"widget://image/nav_tab_3_on.png"},{text:"I",iconPath:"widget://image/nav_tab_4.png",selectedIconPath:"widget://image/nav_tab_4_on.png"}],框架:[{title:"微信",name:"tab_frm_1",??url:"widget://html/tab_content_1.html"},{title:"联系人",name:"tab_frm_2",url:"widget://html/tab_content_2.html"},{title:"Discover",name:"tab_frm_3",url:"widget://html/tab_content_3.html"},{title:"I",name:"tab_frm_4",url:"widget://html/tab_content_4.html"}]}}api.openTabLayout(param);}如果点击tabBar项后需要做其他处理，可以监听tabitembtn事件进行处理。tabBar监听点击事件后不会自动切换页面，需要调用setTabBarAttr方法进行切换functionapiready(){api.addEventListener({name:'tabitembtn'},function(ret){console.log('clickeditem'+(ret.index+1)+');api.setTabBarAttr({index:ret.index});});}打开tabBar后，可以为tabBar上的每一项设置角标，如：functionsetTabBarItemDot(){api.setTabBarItemAttr({index:2,badge:{text:'',半径:5,x:8}});}
