NVTabBar

来自于:APICloud 官方立即使用

概述

NVTabBar 是一个底部导航条模块,该模块依附于当前主 window 。开发者可通过相应接口参数自定义其样式,设置、取消选中状态,动态配置 item 的徽章(badge)等功能。

本模块可实现的效果图如下所示:

open

打开模块并显示

open({params}, callback(ret))

params

styles:

  • 类型:JSON 对象
  • 描述:模块样式配置
  • 默认值:见内部字段
  • 内部字段:
{
    bg: '#fff',         //(可选项)字符串类型;模块背景,支持 rgb、rgba、#、img;默认:#ffffff
    h: 50 ,             //(可选项)数字类型;模块的高度(含分割线);默认:50
    dividingLine: {     //(可选项)JSON对象;模块顶部的分割线配置
       width: 0.5,      //(可选项)数字类型;分割线粗细;默认:0.5
       color: '#000'    //(可选项)字符串类型;分割线颜色;默认:#000
    },
    badge: {            //(可选项)JSON对象;徽章样式配置;若不传则去内部字段默认值
       bgColor: '#ff0', //(可选项)字符串类型;徽章背景色,支持rgb、rgba、#;默认:#ff0
       numColor: '#fff',//(可选项)字符串类型;徽章数字字体颜色,支持rgb、rgba、#;默认:#fff
       size: 6.0,       //(可选项)数字类型;徽章半径大小;默认值:6.0
       fontSize:10      // (可选项) 数字类型;设置徽章字体大小;默认值: 10 ;注意:仅支持iOS。
       centerX: 6.0,    //(可选项)数字类型;徽章中心点坐标(相对于所属item的背景面板坐标系);默认值:icon图标的右上角
       centerY: 6.0     //(可选项)数字类型;徽章中心点坐标(相对于所属item的背景面板坐标系);默认值:icon图标的右上角
    }
}

items:

  • 类型:数组
  • 描述:导航条子项配置,子项条数不能超过 5
  • 内部字段:
[{
    w: api.winWidth/5.0,      //(可选项)数字类型;子项的宽度(识别点击事件的区域宽度);默认:api.winWidth/items子项总数
    bg: {                     //(可选项)JSON对象;子项背景配置,若不传则取内部字段默认值
       marginB: 0,            //(可选项)数字类型;子项背景距离模块底部的距离,设置大于0的数字可实现凸起效果;默认:0
       image: 'rgba(0,0,0,0)',//(可选项)字符串类型;子项的背景,支持rgb、rgba、#、img(仅支持本地图片路径fs://、widget://);默认:rgba(0,0,0,0)
    },
    iconRect: {               //(可选项)JSON对象;子项按钮图标的大小配置,位置居中显示;默认值见内部字段
       w: 25.0,               //(可选项)数字类型;子项按钮图标的宽度;默认:25.0
       h: 25.0,               //(可选项)数字类型;子项按钮图标的高度;默认:25.0
    },
    icon: {                   // JSON对象;子项按钮图标配置
        normal: '',           // 字符串类型;子项按钮常态下的背景图片路径,要求本地路径(fs://、widget://)
        highlight: '',        //(可选项)字符串类型;子项按钮高亮态下的背景图片路径,要求本地路径(fs://、widget://),若不传或传空则无按钮高亮效果
        selected: ''          //(可选项)字符串类型;子项按钮按钮选中后的背景图片路径,要求本地路径(fs://、widget://),若不传或传空则无选中后效果
    },
    title: {                  //(可选项)JSON对象;子项标题配置,若不传则不显示
       text: '',              //(可选项)字符串类型;子项按钮下面的标题文字,若不传或传空则不显示
       size: 12.0,            //(可选项)数字类型;子项标题文字大小;默认:12.0  
       normal: '#696969',     //(可选项)字符串类型;子项标题文字常态颜色;默认:#696969
       selected: '#ff0',      //(可选项)字符串类型;子项标题文字选中后颜色;默认:#ff0
       marginB: 6.0           //(可选项)数字类型;子项标题距离模块下边缘的距离;默认:6.0
       ttf:'Alkatip Basma Tom'//(可选项)字符串类型;默认值:当前系统字体;
                                本参数在 iOS 平台上表示字体名称 (必须已在 config 文件内配置 ttf 文件(//docs.apicloud.com/Dev-Guide/app-config-manual#14-1),并在 widget 包内包含该 ttf 文件);
                                本参数在 android 平台上表示 ttf 文件路径,要求本地路径(fs://、widget://)
    }
}]

selectedIndex:

  • 类型:数字
  • 描述:(可选项)默认值为选中状态的按钮的索引,若不传则默认无选中项

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    eventType: 'show',      //字符串类型;交互事件类型,取值范围如下:
                            //show:打开模块并显示事件
                            //click:用户点击模块内子按钮事件
    index:0                 //数字类型;用户点击按钮的索引,仅当 eventType 为 click 时有值
}

示例代码

var NVTabBar = api.require('NVTabBar');
NVTabBar.open({
    styles: {
        bg: '#333',
        //bg:"widget://image/NVTabBar/tabbar_bg.png",
        h: 65,
        dividingLine: {
            width: 0,
            color: '#000'
        },
        badge: {
            bgColor: '#ff0',
            numColor: '#fff',
            size: 6.0,
            centerX: 40,
            centerY: 6
        }
    },
    items: [{
        w: api.winWidth / 5.0,
        bg: {
            marginB: 0,
            image: 'rgba(200,200,200,0.6)'
        },
        iconRect: {
            w: 25.0,
            h: 25.0,
        },
        icon: {
            normal: 'widget://image/NVTabBar/acti.png',
            highlight: 'widget://image/NVTabBar/actied.png',
            selected: 'widget://image/NVTabBar/actied.png'
        },
        title: {
            text: '动态',
            size: 12.0,
            normal: '#696969',
            selected: '#eb4f38',
            marginB: 6.0
        }
    }, {
        w: api.winWidth / 5.0,
        bg: {
            marginB: 0,
            image: 'rgba(200,200,200,0.7)'
        },
        iconRect: {
            w: 25.0,
            h: 25.0,
        },
        icon: {
            normal: 'widget://image/NVTabBar/guan.png',
            highlight: 'widget://image/NVTabBar/guaned.png',
            selected: 'widget://image/NVTabBar/guaned.png'
        },
        title: {
            text: '发现',
            size: 12.0,
            normal: '#696969',
            selected: '#eb4f38',
            marginB: 6.0
        }
    }, {
        w: api.winWidth / 5.0,
        bg: {
            marginB: 10,
            image: 'widget://image/NVTabBar/yyuan.png' //中间背景图
        },
        iconRect: {
            w: 32,
            h: 32,
        },
        icon: {
            normal: 'widget://image/NVTabBar/mai.png',
            highlight: 'widget://image/NVTabBar/mai.png',
            selected: 'widget://image/NVTabBar/mai.png'
        },
        title: {
            //text : '333',
            size: 0.0,
            normal: '#696969',
            selected: '#eb4f38',
            marginB: 0
        }
    }, {
        w: api.winWidth / 5.0,
        bg: {
            marginB: 0,
            image: 'rgba(200,20,0,0.6)'
        },
        iconRect: {
            w: 25.0,
            h: 25.0,
        },
        icon: {
            normal: 'widget://image/NVTabBar/fav.png',
            highlight: 'widget://image/NVTabBar/faved.png',
            selected: 'widget://image/NVTabBar/faved.png'
        },
        title: {
            text: '消息',
            size: 12.0,
            normal: '#696969',
            selected: '#eb4f38',
            marginB: 6.0
        }
    }, {
        w: api.winWidth / 5.0,
        bg: {
            marginB: 0,
            image: 'rgba(220,0,220,0.7)'
        },
        iconRect: {
            w: 25.0,
            h: 25.0,
        },
        icon: {
            normal: 'widget://image/NVTabBar/bir.png',
            highlight: 'widget://image/NVTabBar/bired.png',
            selected: 'widget://image/NVTabBar/bired.png'
        },
        title: {
            text: '我的',
            size: 12.0,
            normal: '#696969',
            selected: '#eb4f38',
            marginB: 6.0
        }
    }],
    selectedIndex: 0
}, function(ret, err) {

});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

hide

隐藏模块(并没有从内存清除)

hide({params});

params

animation:

  • 类型:布尔
  • 描述:(可选项)显示是否添加动画(淡入淡出的动画)
  • 默认:false

示例代码

var NVTabBar = api.require('NVTabBar');
NVTabBar.hide({
animation:false
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

show

显示已隐藏的模块

show({params});

params

animation:

  • 类型:布尔
  • 描述:(可选项)显示是否添加动画(淡入淡出的动画)
  • 默认:false

示例代码

var NVTabBar = api.require('NVTabBar');
NVTabBar.show({
animation:false
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

close

关闭模块,并从内存里清除

close()

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setBadge

设置按钮右上角的徽章

setBadge({params})

params

index:

  • 类型:数字
  • 说明:(可选项)要设置的子项的下标
  • 默认值:0

badge:

  • 类型:字符串
  • 说明:(可选项)要设置的徽章的内容
  • 备注:若不传则表示清除已显示的徽章,若传空字符串则显示小红点(大小为徽章的1.0/2.0)

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setSelect

设置按钮的选中状态

setSelect({params})

params

index:

  • 类型:数字
  • 描述:(可选项)要设置的子项的索引
  • 默认值:0

selected:

  • 类型:布尔
  • 描述:(可选项)要设置的子项按钮的状态
  • 默认值:true

icons:

  • 类型:数组
  • 描述:(可选项)设置子按钮的多图联播效果(gif图效果),若不传本参数则默认显示open接口内配置的图片
  • 示例代码:
['fs://res/gif1.png','fs://res/gif2.png','fs://res/gif3.png','fs://res/gif4.png','fs://res/gif5.png','fs://res/gif6.png']

interval:

  • 类型:数字
  • 描述:(可选项)动画帧之间的时间间隔(单位:毫秒 ms)
  • 默认:300

示例代码

var NVTabBar = api.require('NVTabBar');
NVTabBar.setSelect({
    index: 1,
    selected: true,
    icons:['fs://res/gif1.png','fs://res/gif2.png','fs://res/gif3.png','fs://res/gif4.png','fs://res/gif5.png','fs://res/gif6.png']
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

bringToFront

将已经打开的模块置为最上层显示

bringToFront()

示例代码

var NVTabBar = api.require('NVTabBar');
NVTabBar.bringToFront();

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本