NVTabBarAnimation
论坛示例
为帮助用户更好更快的使用插件，论坛维护了一个示例，示例中包含示例代码、知识点讲解、注意事项等，供您参考。
概述
NVTabBarAnimation 是一个底部导航条插件，该插件依附于当前主 window 。开发者可通过相应接口参数自定义其样式，设置、取消选中状态，动态配置 item 的徽章（badge）等功能。相比较NVTabbar，本插件增加了动态icon（类似gif图的动画）的展示和动态、静态切换功能，开发者可在插件初始化或之后调用相应接口进行设置。
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
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)
},
icon: { // JSON对象；子项按钮静态图标配置，值为空则不显示图标
normal: '', // 字符串类型；子项按钮常态下的背景图片路径，要求本地路径（fs://、widget://）
highlight: '', //（可选项）字符串类型；子项按钮高亮态下的背景图片路径，要求本地路径（fs://、widget://），若不传或传空则无按钮高亮效果
selected: '', //（可选项）字符串类型；子项按钮按钮选中后的背景图片路径，要求本地路径（fs://、widget://），若不传或传空则无选中后效果
rect: { //（可选项）JSON对象；子项按钮图标的大小配置，位置居中显示；值为空则不显示图标
w: 25.0, //（可选项）数字类型；子项按钮图标的宽度；默认：25.0
h: 25.0, //（可选项）数字类型；子项按钮图标的高度；默认：25.0
x:0, //（可选项）数字类型：子项按钮图标左上顶点x坐标数值，（相对于所属item的背景面板坐标系）；默认不填则水平居中（开发时注意0与不填是有区别的）
y:0, //（可选项）数字类型：子项按钮图标左上顶点y坐标数值, （相对于所属item的背景面板坐标系）；默认值为0
},
},
animationIcons: { // JSON对象；子项按钮动态图标（动画）配置，值为空则不显示动态图标
// 注意：本动画状态不受按钮点击事件影响，即无论按钮未选择状态还是选择状态，本动画图标均不做改变。动画的显示、隐藏、改变内部动画图片路径等属性改变，需开发者自行调用item属性设置接口。
paths: ['','',''], // 数组对象；组成动态动画的静态图片路径数组。图片路径要求本地路径（fs://、widget://）
rect: { //（可选项）JSON对象；子项按钮动态图标的大小配置，位置居中显示；值为空则不显示图标
w: 25.0, //（可选项）数字类型；子项按钮图标的宽度；默认：25.0
h: 25.0, //（可选项）数字类型；子项按钮图标的高度；默认：25.0
x:0, //（可选项）数字类型：子项按钮图标左上顶点x坐标数值，（相对于所属item的背景面板坐标系）；默认不填则水平居中（开发时注意0与不填是有区别的）
y:0 //（可选项）数字类型：子项按钮图标左上顶点y坐标数值, （相对于所属item的背景面板坐标系）；默认值:0
},
interval:100 //动画的静态图片切换间隔时间，单位ms，默认:100
},
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://）
},
rect: { //（可选项）JSON对象；子项按钮标题的大小配置，位置水平居中显示；默认值见内部字段
w: api.winWidth/items, //（可选项）数字类型；子项按钮图标的宽度；默认：整个item宽度
x:0, //（可选项）数字类型：子项按钮标题左上顶点x坐标数值，（相对于所属item的背景面板坐标系）；默认不填则水平居中（开发时注意0与不填是有区别的）
y:0, //（可选项）数字类型：子项按钮图标左上顶点y坐标数值, （相对于所属item的背景面板坐标系）；默认值:0
},
}]
selectedIndex：
- 类型：数字
- 描述：（可选项）默认值为选中状态的按钮的索引，若不传则默认无选中项
callback(ret)
ret：
- 类型：JSON 对象
- 内部字段：
{
eventType: 'show', //字符串类型；交互事件类型，取值范围如下：
//show：打开插件并显示事件
//click：用户点击插件内子按钮事件
index:0 //数字类型；用户点击按钮的索引，仅当 eventType 为 click 时有值
}
示例代码
var NVTabBarAnimation = api.require('NVTabBarAnimation');
NVTabBarAnimation.open({
styles: {
bg: '#fff',
h: 58,
dividingLine: {
width: 0.5,
color: '#ccc'
},
badge: {
bgColor: '#f45815',
numColor: '#fff',
size: 7.0
}
},
items: [{
w: api.winWidth / 5.0,
bg: {
marginB: 0,
image: 'rgba(0,0,0,0)',
},
icon: {
normal: 'widget://res/NVTabBarAnimation/1.png',
highlight: 'widget://res/NVTabBarAnimation/11.png',
rect: {
w: 25.0,
h: 25.0,
x: 0,
y: 0,
},
},
animationIcons: {
paths: ['widget://res/NVTabBarAnimation/1.png', 'widget://res/NVTabBarAnimation/2.png', 'widget://res/NVTabBarAnimation/3.png'],
rect: {
w: 25.0,
h: 25.0,
x: 0,
y: 0
},
interval: 300
},
title: {
text: '首页',
size: 12.0,
normal: '#696969',
selected: '#ff0',
marginB: 6.0,
ttf: 'Alkatip Basma Tom'
},
rect: {
w: api.winWidth / 5.0,
x: 0,
y: 0,
},
}, {
w: api.winWidth / 5.0,
bg: {
marginB: 0,
image: 'rgba(0,0,0,0)',
},
icon: {
normal: 'widget://res/NVTabBarAnimation/2.png',
highlight: 'widget://res/NVTabBarAnimation/22.png',
rect: {
w: 25.0,
h: 25.0,
x: 0,
y: 0,
},
},
animationIcons: {
paths: ['widget://res/NVTabBarAnimation/1.png', 'widget://res/NVTabBarAnimation/2.png', 'widget://res/NVTabBarAnimation/3.png'],
rect: {
w: 25.0,
h: 25.0,
x: 0,
y: 0
},
interval: 300
},
title: {
text: '商圈',
size: 12.0,
normal: '#696969',
selected: '#ff0',
marginB: 6.0,
ttf: 'Alkatip Basma Tom'
},
rect: {
w: api.winWidth / 5.0,
x: 0,
y: 0,
},
}, {
w: api.winWidth / 5.0,
bg: {
marginB: 0,
image: 'rgba(0,0,0,0)',
},
icon: {
normal: 'widget://res/NVTabBarAnimation/3.png',
highlight: 'widget://res/NVTabBarAnimation/33.png',
rect: {
w: 25.0,
h: 25.0,
x: 0,
y: 0,
},
},
animationIcons: {
paths: ['widget://res/NVTabBarAnimation/1.png', 'widget://res/NVTabBarAnimation/2.png', 'widget://res/NVTabBarAnimation/3.png'],
rect: {
w: 25.0,
h: 25.0,
x: 0,
y: 0
},
interval: 300
},
title: {
text: '地图',
size: 12.0,
normal: '#696969',
selected: '#ff0',
marginB: 6.0,
ttf: 'Alkatip Basma Tom'
},
rect: {
w: api.winWidth / 5.0,
x: 0,
y: 0,
},
}, {
w: api.winWidth / 5.0,
bg: {
marginB: 0,
image: 'rgba(0,0,0,0)',
},
icon: {
normal: 'widget://res/NVTabBarAnimation/4.png',
highlight: 'widget://res/NVTabBarAnimation/44.png',
rect: {
w: 25.0,
h: 25.0,
x: 0,
y: 0,
},
},
animationIcons: {
paths: ['widget://res/NVTabBarAnimation/1.png', 'widget://res/NVTabBarAnimation/2.png', 'widget://res/NVTabBarAnimation/3.png'],
rect: {
w: 25.0,
h: 25.0,
x: 0,
y: 0
},
interval: 300
},
title: {
text: '广场',
size: 12.0,
normal: '#696969',
selected: '#ff0',
marginB: 6.0,
ttf: 'Alkatip Basma Tom'
},
rect: {
w: api.winWidth / 5.0,
x: 0,
y: 0,
},
}, {
w: api.winWidth / 5.0,
bg: {
marginB: 0,
image: 'rgba(0,0,0,0)',
},
icon: {
normal: 'widget://res/NVTabBarAnimation/5.png',
highlight: 'widget://res/NVTabBarAnimation/55.png',
rect: {
w: 25.0,
h: 25.0,
x: 0,
y: 0,
},
},
animationIcons: {
paths: ['widget://res/NVTabBarAnimation/1.png', 'widget://res/NVTabBarAnimation/2.png', 'widget://res/NVTabBarAnimation/3.png'],
rect: {
w: 25.0,
h: 25.0,
x: 0,
y: 0
},
interval: 300
},
title: {
text: '我的',
size: 12.0,
normal: '#696969',
selected: '#ff0',
marginB: 6.0,
ttf: 'Alkatip Basma Tom'
},
rect: {
w: api.winWidth / 5.0,
x: 0,
y: 0,
},
}],
selectedIndex: 0
}, function(ret, err) {
if (ret && ret.eventType == "click") {
api.alert({msg: JSON.stringify(ret)});
}
});
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
hide
隐藏插件（并没有从内存清除）
hide();
示例代码
var NVTabBarAnimation = api.require('NVTabBarAnimation');
NVTabBarAnimation.hide();
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
show
显示已隐藏的插件
show();
示例代码
var NVTabBarAnimation = api.require('NVTabBarAnimation');
NVTabBarAnimation.show();
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
close
关闭插件，并从内存里清除
close()
示例代码
var NVTabBarAnimation = api.require('NVTabBarAnimation');
NVTabBarAnimation.close();
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
setBadge
设置按钮右上角的徽章
setBadge({params})
params
index:
- 类型：数字
- 说明：（可选项）要设置的子项的下标
- 默认值：0
badge：
- 类型：字符串
- 说明：（可选项）要设置的徽章的内容
- 备注：若不传则表示清除已显示的徽章，若传空字符串则显示小红点（大小为徽章的1.0/2.0）
示例代码
var NVTabBarAnimation = api.require('NVTabBarAnimation');
NVTabBarAnimation.setBadge({
index: 3,
badge: ''
});
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
setItemAttr
设置按钮 item 的属性
setItemAttr({params})
params
index：
- 类型：数字
- 描述：（可选项）要设置的子项的索引
- 默认值：0
selected：
- 类型：布尔
- 描述：（可选项）要设置的子项按钮的选中状态，true：选中状态|false：非选中状态
- 默认值：true
icon:
- 类型：JSON 对象
- 描述：（可选项）要设置的子项按钮的 icon 静态图标，若不传则显示原值
- 内部字段：
{
normal: '', //（可选项）字符串类型；子项按钮常态下的背景图片路径，要求本地路径（fs://、widget://）
highlight: '', //（可选项）字符串类型；子项按钮高亮态下的背景图片路径，要求本地路径（fs://、widget://），若不传或传空则无按钮高亮效果
selected: '', //（可选项）字符串类型；子项按钮按钮选中后的背景图片路径，要求本地路径（fs://、widget://），若不传或传空则无选中后效果
}
animationIcons:
- 类型：JSON 对象
- 描述：（可选项）要设置的子项按钮的 icon 动态图标，若不传则显示原值
- 内部字段：
{
paths: ['','',''], // （可选项）数组对象；组成动态动画的静态图片路径数组。图片路径要求本地路径（fs://、widget://）
//注意：本参数添加后会覆盖替换原open中设置的参数，若不传则保持原值
interval:300, //（可选项）动画的静态图片切换间隔时间，单位ms
},
title:
- 类型：JSON 对象
- 描述：（可选项）子项标题设置，若不传则显示原值
- 内部字段：
{
text: '', //（可选项）字符串类型；子项按钮下面的标题文字，传入则替换原open中设定的值
size: 12.0, //（可选项）数字类型；子项标题文字大小；
normal: '#696969', //（可选项）字符串类型；子项标题文字常态颜色；默认：#696969
selected: '#ff0', //（可选项）字符串类型；子项标题文字选中后颜色；默认：#ff0
}
示例代码
var NVTabBarAnimation = api.require('NVTabBarAnimation');
NVTabBarAnimation.setItemAttr({
index:1,
selected:true,
icon:{
normal:'',
highlight:'',
selected:'',
},
animationIcons:{
paths: ['','',''],
interval:300,
},
title:{
text: 'll',
size: 12.0,
normal: '#696969',
selected: '#ff0',
marginB: 6.0
},function(ret, err) {
api.alert({msg: JSON.stringify(ret)});
}
});
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
bringToFront
将已经打开的插件置为最上层显示
bringToFront()
示例代码
var NVTabBarAnimation = api.require('NVTabBarAnimation');
NVTabBarAnimation.bringToFront();
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
论坛示例
为帮助用户更好更快的使用插件，论坛维护了一个示例，示例中包含示例代码、知识点讲解、注意事项等，供您参考。