openTabLayout

打开tabLayout布局

本方法继承了openWin方法的所有参数，同时在此基础上增加了navigationBar、tabBar等参数，来设置和使用原生的顶部导航栏和底部标签栏，可以通过closeWin方法来关闭页面。为帮助您更好的了解和使用tabLayout，可以参考论坛的示例说明。

如果在首页需要使用tabLayout，可以将相关参数配置在JSON文件中，再在config.xml中将content的值设置成该JSON文件的路径，例如：

// 创建一个app.json文件，放置在widget目录下
{
  "name": "root",
  "tabBar": {
    "frames": [{
      "title": "页面一",
      "name": "page1",
      "url": "widget://html/page1.html"
    }, {
      "title": "页面二",
      "name": "page2",
      "url": "widget://html/page2.html"
    }, {
      "title": "页面三",
      "name": "page3",
      "url": "widget://html/page3.html"
    }],
    "list": [{
      "text": "页面一",
      "iconPath": "widget://image/tab_1.png",
      "selectedIconPath": "widget://image/tab_1_hov.png"
    }, {
      "text": "页面二",
      "iconPath": "widget://image/tab_2.png",
      "selectedIconPath": "widget://image/tab_2_hov.png"
    }, {
      "text": "页面三",
      "iconPath": "widget://image/tab_3.png",
      "selectedIconPath": "widget://image/tab_3_hov.png"
    }]
  }
}


// config.xml中设置content字段的值为JSON文件的路径：
<content src="app.json" />

openTabLayout({params})

params

title：

• 类型：字符串
• 默认值：无
• 描述：（可选项）显示在顶部navigationBar上面的标题

hideNavigationBar：

• 类型：布尔
• 默认值：false
• 描述：（可选项）是否隐藏顶部navigationBar导航栏，只在传了navigationBar参数时有效

hideTabBar：

• 类型：布尔
• 默认值：false
• 描述：（可选项）是否隐藏底部tabBar标签栏，只在传了tabBar参数时有效

navigationBar：

• 类型：JSON对象
• 默认值：无
• 描述：（可选项）顶部navigationBar导航栏配置信息
• 内部字段：

{
    height:                   //（可选项）导航栏高度。默认值45。数字类型
    background:               //（可选项）导航栏背景。支持颜色值和图片，默认值#fff，字符串类型
    shadow:                   //（可选项）导航栏底部阴影线颜色。默认值#ddd，字符串类型
    color:                    //（可选项）导航栏标题文字颜色。默认值#000，字符串类型
    fontSize:                 //（可选项）导航栏标题字体大小。默认值17，数字类型
    fontWeight:               //（可选项）导航栏标题字体粗细。字符串类型。Android及iOS8.2以下系统只支持normal、bold，iOS8.2及以上系统支持normal、bold、bolder、lighter、100~900。
    fontFamily:               //（可选项）导航栏标题字体。只支持iOS，字符串类型
    hideBackButton:           //（可选项）是否隐藏默认返回按钮。如果传了leftButtons，hideBackButton参数失效。返回按钮由箭头图标和前一个页面的标题组成，若前一个页面未设置标题，则按钮文字为“返回”。可以通过监听navbackbtn或keyback事件来处理返回按钮的点击事件。布尔类型
    leftButtons:              //（可选项）导航栏左边按钮组。左边按钮会替换掉默认的返回按钮，按钮按照数组顺序从左至右显示，按钮建议最多2个，可以通过监听navitembtn事件来处理按钮点击事件，JSON对象数组类型
    [{
        text:                 //（可选项）按钮标题文字，可以和icon同时存在，字符串类型
        color:                //（可选项）按钮标题文字颜色，默认值#000，字符串类型
        fontSize:             //（可选项）按钮标题字体大小。默认值17，数字类型
        fontWeight:           //（可选项）按钮标题字体粗细，默认值normal。字符串类型。Android及iOS8.2以下系统只支持normal、bold，iOS8.2及以上系统支持normal、bold、bolder、lighter、100~900。
        fontFamily:           //（可选项）按钮标题字体。只支持iOS，字符串类型
        iconPath:             //（可选项）按钮 icon 图标路径，可以和 text 同时存在，图片显示大小由图片尺寸和 scale 参数决定，字符串类型
        scale:                //（可选项）图片的缩放倍数，默认为 4，数字类型。显示规则：当 scale 值为 3 时，若设备上面期望显示的图标尺寸为 30*25，则图片实际尺寸需要为 90*75。
    }],
    rightButtons:             //（可选项）导航栏右边按钮组。按钮按照数组顺序从右至左显示，按钮建议最多2个，可以通过监听navitembtn事件来处理按钮点击事件，JSON对象数组类型
    [{
        text:                 //（可选项）按钮标题文字，可以和icon同时存在，字符串类型
        color:                //（可选项）按钮标题文字颜色，默认值#000，字符串类型
        fontSize:             //（可选项）按钮标题字体大小。默认值17，数字类型
        fontWeight:           //（可选项）按钮标题字体粗细，默认值normal。字符串类型。Android及iOS8.2以下系统只支持normal、bold，iOS8.2及以上系统支持normal、bold、bolder、lighter、100~900。
        fontFamily:           //（可选项）按钮标题字体。只支持iOS，字符串类型
        iconPath:             //（可选项）按钮 icon 图标路径，可以和 text 同时存在，图片显示大小由图片尺寸和 scale 参数决定，字符串类型
        scale:                //（可选项）图片的缩放倍数，默认为 4，数字类型。显示规则：当 scale 值为 3 时，若设备上面期望显示的图标尺寸为 30*25，则图片实际尺寸需要为 90*75。
    }]
}

tabBar：

• 类型：JSON对象
• 默认值：无
• 描述：（可选项）底部tabBar标签栏配置信息，可以通过监听tabitembtn事件来处理标签栏每项的点击事件
• 内部字段：

{
    height:                    //（可选项）标签栏高度。默认值54。数字类型
    background:                //（可选项）标签栏背景。支持颜色值和图片，默认值#fff，字符串类型
    shadow:                    //（可选项）标签栏顶部阴影线颜色。默认值#ddd，字符串类型
    color:                     //（可选项）标签栏各项的文字颜色。默认值#000，字符串类型
    selectedColor:             //（可选项）标签栏各项选中状态的文字颜色。默认值#000，字符串类型
    fontSize:                  //（可选项）标签栏各项文字字体大小。默认值10，数字类型
    fontWeight:                //（可选项）标签栏各项文字字体粗细，默认值normal。字符串类型。Android及iOS8.2以下系统只支持normal、bold，iOS8.2及以上系统支持normal、bold、bolder、lighter、100~900。
    fontFamily:                //（可选项）标签栏各项文字字体。只支持iOS，字符串类型
    textOffset:                //（可选项）标签栏各项文字距离底部的距离。默认值2，数字类型
    animated:                  //（可选项）选中标签栏每项时，切换对应的页面是否带有动画效果，默认值false。布尔类型
    scrollEnabled:             //（可选项）标签栏每项对应的页面间是否能够左右滚动切换，默认值true。布尔类型
    index:                     //（可选项）默认选中项的索引。默认值0。数字类型
    preload:                   //（可选项）预加载的页面个数。默认值0。数字类型
    list:                      // 标签栏各项配置信息，JSON对象数组类型
    [{
        text:                  //（可选项）标题文字，可以和icon同时存在，字符串类型
        iconPath:              //（可选项）默认状态下 icon 图标路径，可以和 text 同时存在，图片显示大小由图片尺寸和 scale 参数决定，字符串类型
        selectedIconPath:      //（可选项）选中状态下 icon 图标路径，可以和 text 同时存在，图片显示大小由图片尺寸和 scale 参数决定，字符串类型
        scale:                 //（可选项）图片的缩放倍数，默认为 4，数字类型。显示规则：当 scale 值为 3 时，若设备上面期望显示的图标尺寸为 30*25，则图片实际尺寸需要为 90*75。
    }],
    frames:                    // 标签栏各项对应的页面的信息，JSON对象数组类型
    [{
        title:                 //（可选项）标签栏切换时对应顶部导航栏的标题文字，字符串类型
        ...                    // 同openFrameGroup方法中frames参数里面的参数
    }]
}

示例代码

// 打开只有navigationBar的页面：
api.openTabLayout({
    name: 'help',
    url: 'widget://html/help.html',
    title: '帮助',
    hideNavigationBar: false,
    navigationBar: {
        background: '#5082c2',
        color: '#fff',
        leftButtons: [{
            iconPath: 'widget://image/back.png'
        }]
    }
});


// 打开只有tabBar的页面：
api.openTabLayout({
    name: 'tabLayout',
    url: 'widget://html/tabLayout.html',
    hideTabBar: false,
    tabBar: {
        selectedColor: '#45C01A',
        list: [{
            text: '页面一',
            iconPath: 'widget://image/tab_1.png',
            selectedIconPath: 'widget://image/tab_1_hov.png'
        }, {
            text: '页面二',
            iconPath: 'widget://image/tab_2.png',
            selectedIconPath: 'widget://image/tab_2_hov.png'
        }, {
            text: '页面三',
            iconPath: 'widget://image/tab_3.png',
            selectedIconPath: 'widget://image/tab_3_hov.png'
        }],
        frames: [{
            name: 'page1',
            url: 'widget://html/page1.html'
        }, {
            name: 'page2',
            url: 'widget://html/page2.html'
        }, {
            name: 'page3',
            url: 'widget://html/page3.html'
        }]
    }
});

可用性

iOS系统，Android系统

可提供的1.2.99及更高版本