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及更高版本
论坛示例
为帮助用户更好更快的使用插件，论坛维护了一个示例，示例中包含示例代码、知识点讲解、注意事项等，供您参考。