openTabLayout

打开tabLayout布局

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

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

  1. // 创建一个app.json文件，放置在widget目录下
  2. {
  3.   "name": "root",
  4.   "tabBar": {
  5.     "frames": [{
  6.       "title": "页面一",
  7.       "name": "page1",
  8.       "url": "widget://html/page1.html"
  9.     }, {
  10.       "title": "页面二",
  11.       "name": "page2",
  12.       "url": "widget://html/page2.html"
  13.     }, {
  14.       "title": "页面三",
  15.       "name": "page3",
  16.       "url": "widget://html/page3.html"
  17.     }],
  18.     "list": [{
  19.       "text": "页面一",
  20.       "iconPath": "widget://image/tab_1.png",
  21.       "selectedIconPath": "widget://image/tab_1_hov.png"
  22.     }, {
  23.       "text": "页面二",
  24.       "iconPath": "widget://image/tab_2.png",
  25.       "selectedIconPath": "widget://image/tab_2_hov.png"
  26.     }, {
  27.       "text": "页面三",
  28.       "iconPath": "widget://image/tab_3.png",
  29.       "selectedIconPath": "widget://image/tab_3_hov.png"
  30.     }]
  31.   }
  32. }
  34. // config.xml中设置content字段的值为JSON文件的路径：
  35. <content src="app.json" />

openTabLayout({params})

params

title：

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

hideNavigationBar：

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

hideTabBar：

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

navigationBar：

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

tabBar：

  • 类型：JSON对象
  • 默认值：无
  • 描述：（可选项）底部tabBar标签栏配置信息，可以通过监听tabitembtn事件来处理标签栏每项的点击事件
  • 内部字段：
  1. {
  2.     height:                    //（可选项）标签栏高度。默认值54。数字类型
  3.     background:                //（可选项）标签栏背景。支持颜色值和图片，默认值#fff，字符串类型
  4.     shadow:                    //（可选项）标签栏顶部阴影线颜色。默认值#ddd，字符串类型
  5.     color:                     //（可选项）标签栏各项的文字颜色。默认值#000，字符串类型
  6.     selectedColor:             //（可选项）标签栏各项选中状态的文字颜色。默认值#000，字符串类型
  7.     fontSize:                  //（可选项）标签栏各项文字字体大小。默认值10，数字类型
  8.     fontWeight:                //（可选项）标签栏各项文字字体粗细，默认值normal。字符串类型。Android及iOS8.2以下系统只支持normal、bold，iOS8.2及以上系统支持normal、bold、bolder、lighter、100~900。
  9.     textOffset:                //（可选项）标签栏各项文字距离底部的距离。默认值2，数字类型
  10.     animated:                  //（可选项）选中标签栏每项时，切换对应的页面是否带有动画效果，默认值false。布尔类型
  11.     scrollEnabled:             //（可选项）标签栏每项对应的页面间是否能够左右滚动切换，默认值true。布尔类型
  12.     index:                     //（可选项）默认选中项的索引。默认值0。数字类型
  13.     preload:                   //（可选项）预加载的页面个数。默认值0。数字类型
  14.     list:                      // 标签栏各项配置信息，JSON对象数组类型
  15.     [{
  16.         text:                  //（可选项）标题文字，可以和icon同时存在，字符串类型
  17.         iconPath:              //（可选项）默认状态下icon图标路径，可以和text同时存在，图片尺寸需要为4倍图，例如设备上面期望显示的图标尺寸为25*25，则图片实际尺寸需要为100*100，推荐尺寸108*108，字符串类型
  18.         selectedIconPath:      //（可选项）选中状态下的icon图标路径，可以和text同时存在，图片尺寸需要为4倍图，例如设备上面期望显示的图标尺寸为25*25，则图片实际尺寸需要为100*100，推荐尺寸108*108，字符串类型
  19.     }],
  20.     frames:                    // 标签栏各项对应的页面的信息，JSON对象数组类型
  21.     [{
  22.         title:                 //（可选项）标签栏切换时对应顶部导航栏的标题文字，字符串类型
  23.         ...                    // 同openFrameGroup方法中frames参数里面的参数
  24.     }]
  25. }

示例代码

  1. // 打开只有navigationBar的页面：
  2. api.openTabLayout({
  3.     name: 'help',
  4.     url: 'widget://html/help.html',
  5.     title: '帮助',
  6.     hideNavigationBar: false,
  7.     navigationBar: {
  8.         background: '#5082c2',
  9.         color: '#fff',
  10.         leftButtons: [{
  11.             iconPath: 'widget://image/back.png'
  12.         }]
  13.     }
  14. });
  16. // 打开只有tabBar的页面：
  17. api.openTabLayout({
  18.     name: 'tabLayout',
  19.     url: 'widget://html/tabLayout.html',
  20.     hideTabBar: false,
  21.     tabBar: {
  22.         selectedColor: '#45C01A',
  23.         list: [{
  24.             text: '页面一',
  25.             iconPath: 'widget://image/tab_1.png',
  26.             selectedIconPath: 'widget://image/tab_1_hov.png'
  27.         }, {
  28.             text: '页面二',
  29.             iconPath: 'widget://image/tab_2.png',
  30.             selectedIconPath: 'widget://image/tab_2_hov.png'
  31.         }, {
  32.             text: '页面三',
  33.             iconPath: 'widget://image/tab_3.png',
  34.             selectedIconPath: 'widget://image/tab_3_hov.png'
  35.         }],
  36.         frames: [{
  37.             name: 'page1',
  38.             url: 'widget://html/page1.html'
  39.         }, {
  40.             name: 'page2',
  41.             url: 'widget://html/page2.html'
  42.         }, {
  43.             name: 'page3',
  44.             url: 'widget://html/page3.html'
  45.         }]
  46.     }
  47. });

可用性

iOS系统，Android系统

可提供的1.2.99及更高版本