tabBarMenu

论坛示例

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

概述

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

图片说明

open

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

params

defaultBarSelect:

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

autoLayout:

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

barItems:

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

内部字段:

[{
    title:			//标题.
    bgImg: 			//背景图路径.
    bgImgClick: 	//被点击后的背景图路径.
}]

barItemConfig:

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

内部字段:

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

barConfig:

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

内部字段:

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

menuItems:

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

内部字段:

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

menuItemConfig:

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

内部字段:

{
    titleColor:				//文本颜色,默认“#ffffff”(白色),格式为#fff、#ffffff、rgba(r,g,b,a)等.
    titleSelectColor:		//选中状态时,按钮文本的颜色, 默认“#ffffff”(白色).
    fontSize:				//文字大小,默认11.0.
    textMarginTop:			//文本距离按钮上边界的距离,默认90.0.
}

menuConfig:

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

内部字段:

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

callback(ret, err)

ret:

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

内部字段:

{
    item:{ 		//对象,表示被点击的按钮.
        type: 	//被点击的按钮所属控件,字符串,可选”bar”, “menu”
        index:	//被点击的按钮的下标. 标签栏和菜单部分的按钮的下标均分别从 0 开始计数
    }
}

err:

  • 类型: JSON 对象
  • 描述:
  • 内部字段:
{
    msg:			//错误信息.
}

示例代码


var tabBarMenu = api.require('tabBarMenu'),
    theme = 'simple';
tabBarMenu.open({
    defaultBarSelect: 1,
    autoLayout: true,
    barConfig: {
        bgImg: 'widget://image/tabBarMenu/' + theme + '/tabbar_bg.png'
    },
    barItemConfig: {
        titleColor: '#fff',
        titleSelectColor: '#fff',
        fontSize: 11.0,
        textMarginTop: 41.0,
        primaryItem: 2
    },
    barItems: [{
        title: '动态',
        bgImg: 'widget://image/tabBarMenu/' + theme + 'tabbar_icon_auth.png',
        bgImgClick: 'widget://image/tabBarMenu/' + theme + '/tabbar_icon_auth_click.png'
    }, {
        title: '与我有关',
        bgImg: 'widget://image/tabBarMenu/' + theme + '/tabbar_icon_at.png',
        bgImgClick: 'widget://image/tabBarMenu/' + theme + '/tabbar_icon_at_click.png'
    }, {
        title: '动态',
        bgImg: 'widget://image/tabBarMenu/' + theme + '/tabbar_btn.png',
        bgImgClick: 'widget://image/tabBarMenu/' + theme + '/tabbar_btn_click.png'
    }, {
        title: '玩吧',
        bgImg: 'widget://image/tabBarMenu/' + theme + '/tabbar_icon_more.png',
        bgImgClick: 'widget://image/tabBarMenu/' + theme + '/tabbar_icon_more_click.png'
    }, {
        title: '空间',
        bgImg: 'widget://image/tabBarMenu/' + theme + '/tabbar_icon_space.png',
        bgImgClick: 'widget://image/tabBarMenu/' + theme + '/tabbar_icon_space_click.png'
    }],
    menuConfig: {
        coverBgColor: '#000000',
        coverAlpha: 0.8,
        rows: 4
    },
    menuItemConfig: {
        titleColor: '#fff',
        titleSelectColor: '#fff',
        fontSize: 11.0,
        textMarginTop: 90.0
    },
    menuItems: [{
        title: '说说',
        bgImg: 'widget://image/tabBarMenu/' + theme + '/tabbar_btn_popup_talk.png',
        bgImgClick: 'widget://image/tabBarMenu/' + theme + '/tabbar_btn_popup_talk_click.png'
    }, {
        title: '照片',
        bgImg: 'widget://image/tabBarMenu/' + theme + '/tabbar_btn_popup_transferphotos.png',
        bgImgClick: 'widget://image/tabBarMenu/' + theme + '/tabbar_btn_popup_transferphotos_click.png'
    }, {
        title: '水印相机',
        bgImg: 'widget://image/tabBarMenu/' + theme + '/tabbar_btn_popup_watermarkcamera.png',
        bgImgClick: 'widget://image/tabBarMenu/' + theme + '/tabbar_btn_popup_watermarkcamera_click.png'
    }, {
        title: '视频',
        bgImg: 'widget://image/tabBarMenu/' + theme + '/tabbar_btn_popup_video.png',
        bgImgClick: 'widget://image/tabBarMenu/' + theme + '/tabbar_btn_popup_video_click.png'
    }, {
        title: '签到',
        bgImg: 'widget://image/tabBarMenu/' + theme + '/tabbar_btn_popup_registration.png',
        bgImgClick: 'widget://image/tabBarMenu/' + theme + '/tabbar_btn_popup_registration_click.png'
    }, {
        title: '连拍',
        bgImg: 'widget://image/tabBarMenu/' + theme + '/tabbar_btn_popup_continuousshooting.png',
        bgImgClick: 'widget://image/tabBarMenu/' + theme + '/tabbar_btn_popup_continuousshooting_click.png'
    }, {
        itle: '日志',
        bgImg: 'widget://image/tabBarMenu/' + theme + '/tabbar_btn_popup_journal.png',
        bgImgClick: 'widget://image/tabBarMenu/' + theme + '/tabbar_btn_popup_journal_click.png'
    }, {
        title: '二维码',
        bgImg: 'widget://image/tabBarMenu/' + theme + '/tabbar_btn_popup_2dbarcode.png',
        bgImgClick: 'widget://image/tabBarMenu/' + theme + '/tabbar_btn_popup_2dbarcode_click.png'
    }, {
        title: '语音相机',
        bgImg: 'widget://image/tabBarMenu/' + theme + '/tabbar_btn_popup_videocamera.png',
        bgImgClick: 'widget://image/tabBarMenu/' + theme + '/tabbar_btn_popup_videocamera_click.png'
    }, {
        title: '位置',
        bgImg: 'widget://image/tabBarMenu/' + theme + '/tabbar_btn_popup_place.png',
        bgImgClick: 'widget://image/tabBarMenu/' + theme + '/tabbar_btn_popup_place_click.png'
    }]
}, function(ret, err) {
    if (ret) {
        api.alert({
            msg: JSON.stringify(ret)
        })
    } else {
        api.alert({
            msg: JSON.stringify(err)
        })
    }
});

补充说明

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

close

关闭

close()

示例代码

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

补充说明

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setBarSelect

模拟点击标签栏按钮

setBarSelect({param});

params

index:

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

示例代码

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

补充说明

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setBadge

设置徽章

setBadge({params})

params

item:

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

内部字段:

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

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
  • 说明:徽章距离按钮上边缘的距离.可为空

示例代码

var tabBarMenu = api.require('tabBarMenu');
tabBarMenu.setBadge({
    item: {
        type: 'bar',
        index: 0
    },
    title: '标题',
});

补充说明

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

removeBadge

移除徽章

removeBadge({params})

params

type:

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

index:

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

示例代码

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

补充说明

暂无

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

hide

隐藏

hide();

示例代码

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

补充说明

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

show

显示

show();

示例代码

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

补充说明

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

hideMenu

隐藏弹出菜单

hideMenu();

示例代码

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

补充说明

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

showMenu

显示弹出菜单

showMenu();

示例代码

var tabBarMenu = api.require('tabBarMenu');
tabBarMenu.showMenu();

补充说明

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

是否仍需要帮助? 请保持联络!
最后更新于 2024/10/10