tabBar

来自于:官方立即使用

概述

tabBar是一个底部导航条模块,开发者可自定义每个按钮样式及其显示的徽章(badge),当子按钮个数超出屏幕时,用户可左右拖动查看。本模块已停止更新,建议使用 NVTabBar 模块

open

打开

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

params

bgImg:

  • 类型:字符串
  • 描述:tabBar的背景图片路径,要求本地路径(fs://、widget://)

selectImg:

  • 类型:字符串
  • 描述:选中按钮后的按钮背景效果图片路径

perScreenBtn:

  • 类型:数字
  • 默认值:5
  • 描述:(可选项)每屏显示按钮的个数

items:

  • 类型:数组
  • 描述:多个按钮的信息组成的数组
  • 内部字段:
[{
    img:                 //字符串类型;按钮图片路径,要求本地路径(fs://、widget://)
    highlight:           //字符串类型;按钮按下时的背景图片,要求本地路径(fs://、widget://)
    selected:            //字符串类型;按钮选中后的图片,要求本地路径(fs://、widget://)
    title:               //字符串类型;按钮的标题
    color:               //(可选项)字符串类型;标题的颜色,支持 rgba、rgb、#;默认:#fff
    selectedTitleColor:  //(可选项)字符串类型;选中后的按钮标题颜色,支持 rgb、rgba、#;默认:#fff
    badge:               //(可选项)字符串类型;按钮左上角的badge,不传时不显示badge
}]

selecteIndex:

  • 类型:数字
  • 描述:(可选项)默认选中按钮的下标,不传则都不选中

h:

  • 类型:数字
  • 描述:(可选项)模块视图的高
  • 默认值:50

fixedOn:

  • 类型:字符串类型
  • 描述:(可选项)模块视图添加到指定 frame 的名字(只指 frame,传 window 无效)
  • 默认:模块依附于当前 window

badgeAlignment:

  • 类型:字符串
  • 描述:(可选项)徽章位置
  • 默认值:left
  • 取值范围:
    • left:中间偏左(相对于所在 item)显示
    • right:中间偏右(相对于所在 item)显示

callback(ret, err)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    index:            //数字类型;点击某个按钮返回其索引值
}

示例代码

var tabBar = api.require('tabBar');
tabBar.open({
    bgImg: 'widget://res/img/bg.png',
    items: [{
        title: '标题一',
        img: 'widget://res/img/ic/item.png',
        badge: '1'
    }, {
        title: '标题二',
        img: 'widget://res/img/ic/item.png',
        badge: '2'
    }, {
        title: '标题三',
        img: 'widget://res/img/ic/item.png',
        badge: '1'
    }, {
        title: '标题四',
        img: 'widget://res/img/ic/item.png',
        badge: '2'
    }],
    fixedOn: api.frameName
}, function(ret, err) {
    if (ret) {
        alert(JSON.stringify(ret));
    } else {
        alert(JSON.stringify(err));
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setBadge

设置按钮左上角的badge标注

setBadge({params})

params

index:

  • 类型:数字
  • 说明:要设置的按钮的下标

badge:

  • 类型:字符串
  • 说明:(可选项)要设置的标注,不传则设置为不显示徽章

示例代码

var tabBar = api.require('tabBar');
tabBar.setBadge({
    index: 3,
    badge: '说明'
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

hide

隐藏tabBar

hide();

示例代码

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

补充说明

将已打开的tabBar以移动动画的形式移出到屏幕下方

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

show

显示隐藏的tabBar

show();

示例代码

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

补充说明

将已打开的tabBar以移动动画的形式弹出

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

close

关闭tabBar

close()

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setSelect

设置选中按钮

setSelect({params})

params

index:

  • 类型:数字
  • 描述:(可选项)要设置的按钮的下标
  • 默认值:0

示例代码

var tabBar = api.require('tabBar');
tabBar.setSelect({
    index: 1
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本