# openTabLayoutDemo

**Repository Path**: panfuy/openTabLayoutDemo

## Basic Information

- **Project Name**: openTabLayoutDemo
- **Description**: APICloud重磅推出TabLayout高级窗口组件

      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的开销，因此
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: https://community.apicloud.com/bbs/thread-123685-1-1.html
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2017-12-07
- **Last Updated**: 2021-06-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

APICloud重磅推出TabLayout高级窗口组件

      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封装了原生的导航栏，可以方便地实现头部效果，导航栏会自动适配屏幕状态栏和沉浸式，效果如图：
![自动适配屏幕状态栏和沉浸式](https://community.apicloud.com/bbs/data/attachment/forum/201902/27/144817p8dmm0r0p137gg10.gif "自动适配屏幕状态栏和沉浸式")
  

实现的代码只需要简单的几行：
`
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键，效果如图：
![微信效果](https://community.apicloud.com/bbs/data/attachment/forum/201902/27/144526rza5bozadb55ksk1.gif "微信效果")
  

实现的代码如下：
`
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
        }
    });
}
`