博客> 重磅推出TabLayout高级窗口组件
重磅推出TabLayout高级窗口组件
2019-11-12 21:39 评论:0 阅读:215 api_cloud
开发 提高效率

TabLayout是在APICloud现有窗口系统基础上升级而来的高级窗口组件,符合Material Design规范,可通过简单的配置为窗口实现原生的导航栏和TabBar,它将帮助您节省30%以上的重复编码工作量,同时为APP节省50%以上的系统资源开销,带来APP页面打开速度、应用性能上的整体提升,助您更快速的开发精美APP。

使用tabLayout主要优点

1、减少代码,提升开发效率 使用tabLayout只需要简单配置参数即可实现首页tabBar+frameGroup的整体布局,不用在window页面中书写header、footer标签和css样式来实现导航栏、标签栏,同时也不用考虑适配状态栏和虚拟home键。因此可以将更多时间花在具体业务的实现上面,从而提高开发效率。

2、加快打开页面速度,提升应用性能 使用tabLayout来实现导航栏时,由于导航栏是原生实现的,那么只需要打开一个window页面来实现内容页,相较于之前window+frame的结构,减少了一个webView的开销,因此大大提高了页面打开速度,并且减少了应用的内存占用。

tabLayout相关的方法请参考API文档,下面介绍tabLayout的基本使用:

◆◆实现导航栏navigationBar效果◆◆

tabLayout封装了原生的导航栏,可以方便地实现头部效果,导航栏会自动适配屏幕状态栏和沉浸式。 实现的代码只需要简单的几行: function openNavWin(){

var param = { name: 'nav', url: './main_content.html', bgColor: '#fff', title: 'navigationBar', navigationBar: { rightButtons: [{ iconPath: "widget://image/more.png" }] } } api.openTabLayout(param); }

对于导航栏上面按钮的点击事件,则可以在打开的页面中通过监听事件进行处理: function apiready(){

api.addEventListener({ name: 'navbackbtn' }, function(ret, err) { alert('点击了返回按钮'); api.closeWin(); });

api.addEventListener({ name: 'navitembtn' }, function(ret, err) { if (ret.type == 'right') { alert('点击了右边按钮'); } }); }

◆◆实现tabBar效果◆◆ tabLayout将tabBar控件和frameGroup结合到了一起,tabLayout会自动管理tabBar项和对应的页面,同时tabBar会自动适配底部虚拟home键。 实现的代码如下: function openNavTabWin(){

var param = { name: 'nav-tab', title:'nav-tab', bgColor:'#fff', slidBackEnabled: false, navigationBar: { hideBackButton: true }, tabBar: { animated: true, list: [ { text: "微信", 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: "发现", iconPath: "widget://image/nav_tab_3.png", selectedIconPath: "widget://image/nav_tab_3_on.png" }, { text: "我", iconPath: "widget://image/nav_tab_4.png", selectedIconPath: "widget://image/nav_tab_4_on.png" } ], frames: [ { 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: "发现", name: "tab_frm_3", url: "widget://html/tab_content_3.html" }, { title: "我", name: "tab_frm_4", url: "widget://html/tab_content_4.html" } ] } } api.openTabLayout(param); }

如果需要在点击tabBar项后做其它的处理,可以监听tabitembtn事件进行处理,监听点击事件后tabBar将不会自动切换页面,需要调用setTabBarAttr方法进行切换。 function apiready(){

api.addEventListener({ name:'tabitembtn' }, function(ret) { console.log('点击了第'+(ret.index+1)+'项'); api.setTabBarAttr({ index: ret.index }); }); }

打开tabBar后,可以为tabBar上面的各项设置角标,如: function setTabBarItemDot(){

api.setTabBarItemAttr({ index: 2, badge: { text: '', radius: 5, x: 8 } }); }

收藏
0
sina weixin mail 回到顶部