NVTabBar

论坛示例

为帮助用户更好更快的使用插件,论坛维护了一个示例,示例中包含示例代码、知识点讲解、注意事项等,供您参考。

概述

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

注意:本插件已经适配iPhoneX以上机型,所以iPhoneX以上机型的高度比设置的高度多了34。在使用过程中,如果需要计算frame的高度,请判断一下是否为iPhoneX以上机型,如果是,在减去插件高度基础上再减去34,即可。已避免当前的页面盖住底部导航条的现象出现。

本插件可实现的效果图如下所示:

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图标的右上角
                           注意:iOS1.0.6版本及以后此参数无效
       centerY: 6.0     //(可选项)数字类型;徽章中心点坐标(相对于所属item的背景面板坐标系);默认值:icon图标的右上角
       rightMargin:0    //(可选项)数字类型;徽章右边距(相对于所属item的背景面板坐标系);默认值:icon图标的右上角
                           注意:iOS1.0.6版本及以后此参数生效
    }
}

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 文件(https://developer.yonyou.com/docs/Technical-Topics/Introduction-Config-Config_Xml#14-1),并在 widget 包内包含该 ttf 文件);
                                本参数在 android 平台上表示 ttf 文件路径,要求本地路径(fs://、widget://)
    }
}]

cursorInOptions:

  • 类型:JSON 对象
  • 描述:选中项的游标(如当前激活状态的item底部显示5pt高度的色块) 若不传,该字段无效
  • 内部字段:
{
    width: 10, //游标的宽
    height:10, //游标的高
    color:'rgba(0,0,0,0)' //游标的颜色,支持图片
}

selectedIndex:

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

enableDoubleClick:

  • 类型:布尔
  • 描述:使能双击事件,默认:false

enableLongPressClick:

  • 类型:布尔
  • 描述:是否使用长按事件,默认:false

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    eventType: 'show',      //字符串类型;交互事件类型,取值范围如下:
                            //show:打开插件并显示事件
                            //click:用户点击插件内子按钮事件
                            //doubleClick:用户双击插件内子按钮事件,只有enableDoubleClick为true且触发双击时回调
                            //longPressclick:用户长按插件内子按钮事件,只有enableLongPressClick为true且触发长按时回调

    index:0                 //数字类型;用户点击按钮的索引,仅当 eventType 为 click和doubleClick 时有值
}

示例代码

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)

horizentalPadding:

  • 类型:数字
  • 说明:(可选项)设置badge水平方向(左右)内边距

示例代码

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

animatedRepetitions:

  • 类型:数字
  • 描述:(可选项)设置动画重复次数(android仅支持循环一次和无线循环,即该参数只对1和0有效)
  • 默认:0 (无限循环)

示例代码

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及更高版本

changeBackground

改变插件背景

changeBackground({params})

params

bg:

  • 类型:数字
  • 描述:(可选项)字符串类型;插件背景,支持 rgb、rgba、#、img

示例代码

var NVTabBar = api.require('NVTabBar');
NVTabBar.changeBackground({
  bg:''
});

可用性

iOS系统,Android系统

可提供的1.0.8及更高版本

论坛示例

为帮助用户更好更快的使用插件,论坛维护了一个示例,示例中包含示例代码、知识点讲解、注意事项等,供您参考。

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