tabBarMenu

open setBarSelect removeBadge show showMenu

论坛示例

为帮助用户更好更快的使用模块，论坛维护了一个，示例中包含示例代码供您参考。

概述

tabBarMenu 生成一个应用底部导航菜单模块，类似qq空间的底部导航菜单，开发者可自定义菜单各种样式

open

打开 open({params}, callback(ret, err))

defaultBarSelect:

  • 类型: 数字
  • 默认值: 0
  • 描述：默认选中的标签栏按钮.可为空

autoLayout:

  • 类型: 布尔值.
  • 默认值: true
  • 描述: 是否自动智能调整当前页面 webView 的位置: 使其距离屏幕底部距离变为 49可为空

barItems：

  • 类型：数组
  • 默认值：无
  • 描述：标签栏各按钮信息

内部字段:

barItemConfig：

  • 类型: JSON对象
  • 默认值：无
  • 描述：标签栏各按钮的配置

内部字段:

  2.     titleColor:         //文本颜色,默认“#ffffff”(白色),格式为#fff、#ffffff、rgba(r,g,b,a).
  3.     titleSelectColor:    //选中状态时,按钮文本的颜色,默认“#ffffff”(白色).
  4.     fontSize:             //文字尺寸默认11.0
  5.     textMarginTop:         //文本距离按钮上边界的距离,默认41.0
  6.     primaryItem:         //点击会弹出菜单的按钮的下标, 默认 2(即第三个按钮)
  7. }

barConfig：

  • 类型：JSON 对象
  • 默认值：无
  • 描述：标签栏配置

内部字段:

  1. {
  2.     bgImg:         //背景图片路径.
  3. }

menuItems：

  • 类型：数组
  • 默认值：无
  • 描述：菜单各菜单项的信息(必填)

内部字段：

  1. [{
  2.     title:          //标题
  3.     bgImg:          //背景图片.
  4.     bgImgClick:     //点击时的背景图片.
  5. }]

menuItemConfig：

  • 类型：JSON 对象
  • 默认值：无
  • 描述：菜单项配置(必填)

内部字段：

  1. {
  2.     titleColor:                //文本颜色,默认“#ffffff”(白色),格式为#fff、#ffffff、rgba(r,g,b,a)等.
  3.     titleSelectColor:        //选中状态时,按钮文本的颜色, 默认“#ffffff”(白色).
  4.     fontSize:                //文字大小,默认11.0.
  5. }

menuConfig：

  • 类型：JSON 对象
  • 默认值：无
  • 描述：菜单配置(必填)

内部字段：

  1. {
  2.     coverBgColor:    //遮罩背景色,默认“#000000”(黑色)格式为#fff、#ffffff、rgba(r,g,b,a)
  3.     coverAlpha:        //遮罩的透明度, ,默认0.8,取值范围0.0~1.0.
  4.     rows:            //单页每行显示的按钮数,默认4.
  5. }

callback(ret, err)

ret：

  • 类型：JSON 对象
  • 描述: 包含被点击的按钮的相关信息

内部字段：

err:

  • 类型: JSON 对象
  • 描述:

  • 内部字段:

    1. {
    2.   msg:            //错误信息.
    3. }

示例代码

  2. var tabBarMenu = api.require('tabBarMenu'),
  3.     theme = 'simple';
  4. tabBarMenu.open({
  5.     defaultBarSelect: 1,
  6.     autoLayout: true,
  7.     barConfig: {
  8.         bgImg: 'widget://image/tabBarMenu/' + theme + '/tabbar_bg.png'
  9.     },
  10.     barItemConfig: {
  11.         titleColor: '#fff',
  12.         titleSelectColor: '#fff',
  13.         fontSize: 11.0,
  14.         textMarginTop: 41.0,
  15.         primaryItem: 2
  16.     },
  17.     barItems: [{
  18.         title: '动态',
  19.         bgImg: 'widget://image/tabBarMenu/' + theme + 'tabbar_icon_auth.png',
  20.         bgImgClick: 'widget://image/tabBarMenu/' + theme + '/tabbar_icon_auth_click.png'
  22.         title: '与我有关',
  23.         bgImg: 'widget://image/tabBarMenu/' + theme + '/tabbar_icon_at.png',
  24.         bgImgClick: 'widget://image/tabBarMenu/' + theme + '/tabbar_icon_at_click.png'
  25.     }, {
  26.         title: '动态',
  27.         bgImg: 'widget://image/tabBarMenu/' + theme + '/tabbar_btn.png',
  28.         bgImgClick: 'widget://image/tabBarMenu/' + theme + '/tabbar_btn_click.png'
  29.     }, {
  30.         title: '玩吧',
  31.         bgImg: 'widget://image/tabBarMenu/' + theme + '/tabbar_icon_more.png',
  32.         bgImgClick: 'widget://image/tabBarMenu/' + theme + '/tabbar_icon_more_click.png'
  33.     }, {
  34.         title: '空间',
  35.         bgImg: 'widget://image/tabBarMenu/' + theme + '/tabbar_icon_space.png',
  36.         bgImgClick: 'widget://image/tabBarMenu/' + theme + '/tabbar_icon_space_click.png'
  37.     }],
  38.     menuConfig: {
  39.         coverBgColor: '#000000',
  40.         coverAlpha: 0.8,
  41.         rows: 4
  42.     },
  43.     menuItemConfig: {
  44.         titleColor: '#fff',
  45.         titleSelectColor: '#fff',
  46.         fontSize: 11.0,
  47.         textMarginTop: 90.0
  48.     },
  49.     menuItems: [{
  50.         title: '说说',
  51.         bgImg: 'widget://image/tabBarMenu/' + theme + '/tabbar_btn_popup_talk.png',
  52.         bgImgClick: 'widget://image/tabBarMenu/' + theme + '/tabbar_btn_popup_talk_click.png'
  53.     }, {
  54.         title: '照片',
  55.         bgImg: 'widget://image/tabBarMenu/' + theme + '/tabbar_btn_popup_transferphotos.png',
  56.         bgImgClick: 'widget://image/tabBarMenu/' + theme + '/tabbar_btn_popup_transferphotos_click.png'
  57.     }, {
  58.         title: '水印相机',
  59.         bgImg: 'widget://image/tabBarMenu/' + theme + '/tabbar_btn_popup_watermarkcamera.png',
  60.         bgImgClick: 'widget://image/tabBarMenu/' + theme + '/tabbar_btn_popup_watermarkcamera_click.png'
  61.     }, {
  62.         title: '视频',
  63.         bgImg: 'widget://image/tabBarMenu/' + theme + '/tabbar_btn_popup_video.png',
  64.         bgImgClick: 'widget://image/tabBarMenu/' + theme + '/tabbar_btn_popup_video_click.png'
  65.     }, {
  66.         title: '签到',
  67.         bgImgClick: 'widget://image/tabBarMenu/' + theme + '/tabbar_btn_popup_registration_click.png'
  68.     }, {
  70.         bgImg: 'widget://image/tabBarMenu/' + theme + '/tabbar_btn_popup_continuousshooting.png',
  71.         bgImgClick: 'widget://image/tabBarMenu/' + theme + '/tabbar_btn_popup_continuousshooting_click.png'
  72.     }, {
  73.         itle: '日志',
  74.         bgImg: 'widget://image/tabBarMenu/' + theme + '/tabbar_btn_popup_journal.png',
  75.         bgImgClick: 'widget://image/tabBarMenu/' + theme + '/tabbar_btn_popup_journal_click.png'
  76.     }, {
  77.         title: '二维码',
  78.         bgImg: 'widget://image/tabBarMenu/' + theme + '/tabbar_btn_popup_2dbarcode.png',
  79.         bgImgClick: 'widget://image/tabBarMenu/' + theme + '/tabbar_btn_popup_2dbarcode_click.png'
  80.     }, {
  81.         title: '语音相机',
  82.         bgImg: 'widget://image/tabBarMenu/' + theme + '/tabbar_btn_popup_videocamera.png',
  83.         bgImgClick: 'widget://image/tabBarMenu/' + theme + '/tabbar_btn_popup_videocamera_click.png'
  84.     }, {
  85.         title: '位置',
  86.         bgImg: 'widget://image/tabBarMenu/' + theme + '/tabbar_btn_popup_place.png',
  87.         bgImgClick: 'widget://image/tabBarMenu/' + theme + '/tabbar_btn_popup_place_click.png'
  88.     }]
  89. }, function(ret, err) {
  90.     if (ret) {
  91.         alert(JSON.stringify(ret));
  92.     } else {
  93.         alert(JSON.stringify(err));
  94.     }
  95. });

补充说明

  • 点击菜单栏任意非按钮部分,可以隐藏菜单栏,同时会再次模拟点击员标签栏被选中的按钮一次.
  • 每个窗口最多只允许存在一个tabBarMenu.
  • 若将 参数 autoLayout设为true, 系统会自动在视图打开,关闭,显示,隐藏时对当前页面网页视图到屏幕底部的距离作出适当调整.

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

close

close()

示例代码

  1. var tabBarMenu = api.require('tabBarMenu');
  2. tabBarMenu.close();

补充说明

无

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

setBarSelect

模拟点击标签栏按钮

setBarSelect({param});

params

index:

  • 类型: 数字
  • 默认值: 无
  • 说明: 按钮下标

示例代码

  1. var tabBarMenu = api.require('tabBarMenu');
  2. tabBarMenu.setBarSelect({
  3.     index: 3
  4. });

补充说明

模拟点击,同样会触发按钮的事件响应函数,就像你真的点击了相应的按钮.这对与视图间的联动非常有帮助

iOS系统，Android系统

可提供的1.0.0及更高版本

setBadge

设置徽章

setBadge({params})

params

item:

  • 类型: 对象
  • 默认值:：无
  • 说明: 要设置徽章的按钮

内部字段:

  1. { 
  2.     type:         //按钮所属控件,字符串,可选”bar”, “menu”
  3.     index:        //按钮的下标. 数字,标签栏和菜单部分的按钮的下标均分别从 0 开始计数
  4. }

title:

  • 类型：字符串
  • 默认值: “”
  • 说明：要设置的按钮的内容,可为空;为空时,type会自动设为”center”

type:

  • 类型：字符串
  • 默认值：”center”
  • 说明：徽章风格,可选”left”, “center”, “right”,可为空

bgColor:

  • 类型：字符串
  • 默认值：#ff0000 (红色)
  • 说明：徽章的背景色,格式为#fff、#ffffff、rgba(r,g,b,a)等,可为空

titleColor:

  • 类型：字符串
  • 默认值：#ffffff (白色)
  • 说明：文本颜色,格式为#fff、#ffffff、rgba(r,g,b,a)等,可为空

fontSize:

  • 类型：数字
  • 默认值：11.0
  • 说明：字体大小.可为空

marginTop:

  • 类型：数字
  • 默认值：17.0
  • 说明：徽章距离按钮上边缘的距离.可为空

示例代码

补充说明

当title为空时,会将type自动设为”center”

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

removeBadge

移除徽章

params

type:

  • 类型: 字符串
  • 默认值: 无
  • 说明: 按钮所属控件,可选“bar”, “menu”

index:

  • 类型: 数字
  • 默认值: 无
  • 说明: 按钮下标.标签栏和菜单部分的按钮的下标均分别从 0 开始计数,互不影响

示例代码

  1. var tabBarMenu = api.require('tabBarMenu');
  2. tabBarMenu.removeBadge({
  3.     type: 'bar',
  4.     index: 3
  5. });

补充说明

暂无

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

hide

隐藏

hide();

示例代码

  1. var tabBarMenu = api.require('tabBarMenu');
  2. tabBarMenu.hide();

无

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

show

显示

show();

示例代码

  1. var tabBarMenu = api.require('tabBarMenu');
  2. tabBarMenu.show();

补充说明

无

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

hideMenu

隐藏弹出菜单

hideMenu();

示例代码

  1. var tabBarMenu = api.require('tabBarMenu');
  2. tabBarMenu.hideMenu();

补充说明

无

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

showMenu

显示弹出菜单

showMenu();

示例代码

补充说明

无

iOS系统，Android系统

可提供的1.0.0及更高版本