NVNavigationBar
论坛示例
为帮助用户更好更快的使用插件，论坛维护了一个示例，示例中包含示例代码、知识点讲解、注意事项等，供您参考。
概述
本插件是 navigationBar 插件的升级版，可以用来以原生方式实现应用中常用的导航条功能. 配合 apicloud 平台的 frameGroup 功能( api.openFrameGroup )与 NVTabBar 插件可实现复杂内容的优雅导航和展示
open
打开
open({params}, callback(ret))
params
rect：
- 类型：JSON 对象
- 描述：（可选项）插件的位置及尺寸
- 内部字段：
{
x: 0, //（可选项）数字类型；插件左上角的 x 坐标（相对于所属的 Window 或 Frame）；默认：0
y: 0, //（可选项）数字类型；插件左上角的 y 坐标（相对于所属的 Window 或 Frame）；默认：0
w: 320, //（可选项）数字类型；插件的宽度；默认：当前frame或windown的宽度（仅在 orientation 参数为 'horizon' 时该默认值有效）
h: 30 //（可选项）数字类型；插件的高度；默认：当前frame或windown的高度（仅在 orientation 参数为 'vertical' 时该默认值有效）
}
styles：
- 类型：JSON 对象
- 描述：插件样式配置
- 内部字段：
{
orientation: 'horizontal', //（可选项）字符串类型；导航条方向；取值范围：vertical、horizontal；默认：horizontal
bg: '', //（可选项）导航条背景，支持 rgb、rgba、#、img；默认：#6b6b6b ; 注意:iOS如需设置bgAlpha透明
度时,使用rgba
bgAlpha: 1, //（可选项）背景透明的配置，取值范围：0-1；默认：1 ;仅支持安卓,iOS设置透明度时,用bg参数的rgba
font: { //（可选项）JSON对象；字体配置
size: 14, //（可选项）数字类型；导航项字体大小；默认：14
sizeSelected: 14, //（可选项）数字类型；选中时导航项字体大小；默认：14
color: '#FFFFFF', //（可选项）字符串类型；导航条字体颜色，支持rgb、rgba、#；默认：#FFFFFF
colorSelected: '#FFFFFF', //（可选项）字符串类型；选中时导航条字体颜色，支持rgb、rgba、#；默认：#FFFFFF
alpha: 1, //（可选项）数字类型；背景透明度，取值范围：0-1；默认：1
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://）
bold:true, //（可选项）布尔类型；是否使用粗体；注意：该字段为true时，只会对选中项字体加粗
},
itemSize: { //（可选项）JSON对象；item大小配置
w: 30, //（可选项）数字类型；单个导航项的宽度；默认为导航条宽度/导航项个数，仅在导航条orientation参数为 'horizon'时有效.
h: 30 //（可选项）数字类型；单个导航项的高度；默认为导航条高度/导航项个数，仅在导航条orientation参数为 'vertical'时有效.
},
bounces: false //（可选项）布尔类型；是否开启弹动，暂仅支持iOS平台；默认：false
}
items：
- 类型：JSON 数组
- 描述：按钮项数据
- 内部字段:
[{
title: '新闻', //（可选项）字符串类型；标题，不传则不显示标题
titleSelected: '', //（可选项）字符串类型；选中后的标题，默认与title相同
bg: '#ff0', //（可选项）字符串类型；背景，支持rgb、rgba、#、img；默认：#696969
bgSelected:'', //（可选项）字符串类型；选中后背景，支持rgb、rgba、#、img；默认与 bg 相同
alpha: 1, //（可选项）数字类型；背景透明度，取值范围0-1；默认1
isShadow:true, //(可选项)布尔类型；item是否显示阴影效果； 默认为false
size: { //（可选项）JSON对象；item大小配置，若不传则以 styles 内的 size参数为准，若两者都有值则以本参数为准
w: 30, //（可选项）数字类型；单个导航项的宽度；默认为导航条宽度/导航项个数，仅在导航条orientation参数为 'horizontal'时有效.
h: 30 //（可选项）数字类型；单个导航项的高度；默认为导航条高度/导航项个数，仅在导航条orientation参数为 'vertical'时有效.
}
}]
selectedIndex：
- 类型：数字
- 描述：（可选项）被选中的导航项的下标，不传表示不选中任何 item
fixedOn：
- 类型：字符串
- 描述：（可选项）插件视图添加到指定 frame 的名字（只指 frame，传 window 无效）
- 默认：插件依附于当前 window
fixed:
- 类型：布尔
- 描述：是否将插件视图固定到窗口上，不跟随窗口上下滚动
- 默认值：true
id:
- 类型：字符串
- 描述：导航条的id
callback(ret)
ret：
- 类型：JSON 对象
- 描述：包含被点击的导航项的相关信息
- 内部字段：
{
eventType: 'show', //字符串类型；交互事件类型，取值范围如下：
//show：插件打开成功并显示
//click：用户点击按钮事件
id: 'first', //字符串类型；导航条对象唯一标识，同一页面可打开多个插件
index: 0 //数字类型；导航项下标，当点击 pop按钮时,此值为-1.
}
示例代码
var NVNavigationBar = api.require('NVNavigationBar');
NVNavigationBar.open({
rect: {
x: 0,
y: 600,
w: api.frameWidth,
h: 42
},
styles: {
orientation: 'horizontal',
bg: '#6b6b6b',
bgAlpha: 1,
font: {
size: 14,
sizeSelected: 18,
color: '#FFFFFF',
colorSelected: '#ff0000',
alpha: 1
},
itemSize: {
w: 90,
h: 44
}
},
items: [{
title: '标题一',
bg: '#FFE7BA',
bgSelected: '#ff00000'
},{
title: '标题二',
bg: '#FFE1FF',
bgSelected: '#FFA500'
},{
title: '标题三',
bg: '#FFAEB9',
bgSelected: '#FFA500'
},{
title: '标题四',
bg: '#CDCD00',
bgSelected: '#FFA500'
},{
title: '标题五',
bg: '#BBFFFF',
bgSelected: '#FFA500'
},{
title: '标题六',
bg: '#436EEE',
bgSelected: '#FFA500'
}],
selectedIndex: 1,
fixedOn: api.frameName,
id: 'first'
}, function(ret, err) {
api.alert({msg:JSON.stringify(ret)});
});
补充说明
- 当导航项过多时，每次点击或模拟导航项，都会使被选中的导航项，居中显示在导航条中.
- 可以在同一页面操作多个导航条对象.
- open方法的回调会在以下两种情况下触发：
a.插件第一次打开.
b.用户点击了导航条的按钮.
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
close
关闭
close({params})
params
id：
- 类型：字符串
- 描述：导航条的id
示例代码
var NVNavigationBar = api.require('NVNavigationBar');
NVNavigationBar.close({
id:'first'
});
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
hide
隐藏
hide({params})
params
id：
- 类型：字符串
- 描述：导航条的id
animation：
- 类型：布尔
- 描述：（可选项）显示是否添加动画（淡入淡出的动画）
- 默认：false
orientation：
- 类型：字符串
- 描述：（可选项）动画的方向(top，bottom，left，right)
- 默认：'bottom'
示例代码
var NVNavigationBar = api.require('NVNavigationBar');
NVNavigationBar.hide({
id:'first'
});
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
show
显示
show({params})
params
id：
类型：字符串 描述：导航条的id
animation：
- 类型：布尔
- 描述：（可选项）显示是否添加动画（淡入淡出的动画）
- 默认：false
orientation：
- 类型：字符串
- 描述：（可选项）动画的方向(top，bottom，left，right)
- 默认：'bottom'
示例代码
var NVNavigationBar = api.require('NVNavigationBar');
NVNavigationBar.show({
id:'first'
});
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
setSelected
设置选中项
setSelected({params}, callback(ret))
params
id：
- 类型：字符串
- 描述：导航条的id
index：
- 类型：数字
- 描述：被选中的导航项的下标
selected：
- 类型：布尔
- 描述：选中/取消选中
- 默认：true（选中）
callback(ret)
ret：
- 类型：JSON 对象
- 内部字段：
{
status: true //布尔类型；是否设置成功，true|false
}
示例代码
var NVNavigationBar = api.require('NVNavigationBar');
NVNavigationBar.setSelected({
id: 'first',
index: 2,
selected: true
}, function(ret) {
api.alert({msg: JSON.stringify(ret)});
});
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
insertItem
插入子项
insertItem({params}, callback(ret))
params
id：
- 类型：字符串
- 描述：导航条的id
index：
- 类型：数字
- 描述：插入的导航项的下标
- 取值范围：0（含）-当前子项目总数（不含）
item：
- 类型：JSON 对象
- 描述：按钮项数据
- 内部字段:
{
title: '新闻', //（可选项）字符串类型；标题，不传则不显示标题
titleSelected: '', //（可选项）字符串类型；选中后的标题，默认与title相同
bg: '#ff0', //（可选项）字符串类型；背景，支持rgb、rgba、#、img；默认：#696969
bgSelected:'', //（可选项）字符串类型；选中后背景，支持rgb、rgba、#、img；默认与 bg 相同
alpha: 1 //（可选项）数字类型；背景透明度，取值范围0-1；默认1
size: { //（可选项）JSON对象；item大小配置，若不传则以 styles 内的 size参数为准，若两者都有值则以本参数为准
w: 30, //（可选项）数字类型；单个导航项的宽度；默认为导航条宽度/导航项个数，仅在导航条orientation参数为 'horizontal'时有效.
h: 30 //（可选项）数字类型；单个导航项的高度；默认为导航条高度/导航项个数，仅在导航条orientation参数为 'vertical'时有效.
}
}
callback(ret)
ret：
- 类型：JSON 对象
- 内部字段：
{
status: true //布尔类型；是否设置成功，true|false
}
示例代码
var NVNavigationBar = api.require('NVNavigationBar');
NVNavigationBar.insertItem({
id: 'first',
index: 2,
item:{}
}, function(ret) {
api.alert({msg: JSON.stringify(ret)});
});
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
deleteItem
删除子项
deleteItem({params}, callback(ret))
params
id：
- 类型：字符串
- 描述：导航条的id
index：
- 类型：数字
- 描述：要删除的导航项的下标
- 取值范围：0（含）-当前子项目总数（不含）
callback(ret)
ret：
- 类型：JSON 对象
- 内部字段：
{
status: true //布尔类型；是否设置成功，true|false
}
示例代码
var NVNavigationBar = api.require('NVNavigationBar');
NVNavigationBar.deleteItem({
id: 'first',
index: 2
}, function(ret) {
api.alert({msg: JSON.stringify(ret)});
});
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
updateItem
更新子项
updateItem({params}, callback(ret))
params
id：
- 类型：字符串
- 描述：导航条的id
index：
- 类型：数字
- 描述：更新的导航项的下标
- 取值范围：0（含）-当前子项目总数（不含）
item：
- 类型：JSON 对象
- 描述：按钮项数据
- 内部字段:
{
title: '新闻', //（可选项）字符串类型；标题，不传则不显示标题
titleSelected: '', //（可选项）字符串类型；选中后的标题，默认与title相同
bg: '#ff0', //（可选项）字符串类型；背景，支持rgb、rgba、#、img；默认：#696969
bgSelected:'', //（可选项）字符串类型；选中后背景，支持rgb、rgba、#、img；默认与 bg 相同
alpha: 1 //（可选项）数字类型；背景透明度，取值范围0-1；默认1
size: { //（可选项）JSON对象；item大小配置，若不传则以 styles 内的 size参数为准，若两者都有值则以本参数为准
w: 30, //（可选项）数字类型；单个导航项的宽度；默认为导航条宽度/导航项个数，仅在导航条orientation参数为 'horizontal'时有效.
h: 30 //（可选项）数字类型；单个导航项的高度；默认为导航条高度/导航项个数，仅在导航条orientation参数为 'vertical'时有效.
}
}
callback(ret)
ret：
- 类型：JSON 对象
- 内部字段：
{
status: true //布尔类型；是否设置成功，true|false
}
示例代码
var NVNavigationBar = api.require('NVNavigationBar');
NVNavigationBar.updateItem({
id: 'first',
index: 2,
item:{}
}, function(ret) {
api.alert({msg: JSON.stringify(ret)});
});
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
update
更新所有子项
update({params}, callback(ret))
params
id：
- 类型：字符串
- 描述：导航条的id
items：
- 类型：JSON 数组
- 描述：按钮项数据
- 内部字段:
[{
title: '新闻', //（可选项）字符串类型；标题，不传则不显示标题
titleSelected: '', //（可选项）字符串类型；选中后的标题，默认与title相同
bg: '#ff0', //（可选项）字符串类型；背景，支持rgb、rgba、#、img；默认：#696969
bgSelected:'', //（可选项）字符串类型；选中后背景，支持rgb、rgba、#、img；默认与 bg 相同
alpha: 1 //（可选项）数字类型；背景透明度，取值范围0-1；默认1
size: { //（可选项）JSON对象；item大小配置，若不传则以 styles 内的 size参数为准，若两者都有值则以本参数为准
w: 30, //（可选项）数字类型；单个导航项的宽度；默认为导航条宽度/导航项个数，仅在导航条orientation参数为 'horizontal'时有效.
h: 30 //（可选项）数字类型；单个导航项的高度；默认为导航条高度/导航项个数，仅在导航条orientation参数为 'vertical'时有效.
}
}]
callback(ret)
ret：
- 类型：JSON 对象
- 内部字段：
{
status: true //布尔类型；是否设置成功，true|false
}
示例代码
var NVNavigationBar = api.require('NVNavigationBar');
NVNavigationBar.update({
id: 'first',
items:[]
}, function(ret) {
api.alert({msg: JSON.stringify(ret)});
});
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
setItemLocation
设置item居左、居右、居上、居下
setItemLocation({params})
params
id：
- 类型：字符串
- 描述：导航条的id
locationType：
- 类型：字符串
- 描述：'normal'
- 'normal' //常规
- 'top' //居上；vertical下生效
- 'bottom' //居下；vertical下生效
- 'right' //居右；horizontal下生效
- 'left' //居左；horizontal下生效
index：
- 类型：数字类型
- 描述：选中按钮的index
- 默认：0
示例代码
var NVNavigationBar = api.require('NVNavigationBar');
NVNavigationBar.setItemLocation({
locationType:'right',
index:4
});
可用性
Android系统，iOS系统
可提供的1.0.0及更高版本
论坛示例
为帮助用户更好更快的使用插件，论坛维护了一个示例，示例中包含示例代码、知识点讲解、注意事项等，供您参考。