为帮助用户更好更快的使用插件,论坛维护了一个示例,示例中包含示例代码、知识点讲解、注意事项等,供您参考。
本插件是 navigationBar 插件的升级版,可以用来以原生方式实现应用中常用的导航条功能. 配合 apicloud 平台的 frameGroup 功能( api.openFrameGroup )与 NVTabBar 插件可实现复杂内容的优雅导航和展示
打开
open({params}, callback(ret))
rect:
{
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:
{
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:
[{
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:
fixedOn:
fixed:
id:
ret:
{
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)});
});
a.插件第一次打开.
b.用户点击了导航条的按钮.
iOS系统,Android系统
可提供的1.0.0及更高版本
关闭
close({params})
id:
var NVNavigationBar = api.require('NVNavigationBar');
NVNavigationBar.close({
id:'first'
});
iOS系统,Android系统
可提供的1.0.0及更高版本
隐藏
hide({params})
id:
animation:
orientation:
var NVNavigationBar = api.require('NVNavigationBar');
NVNavigationBar.hide({
id:'first'
});
iOS系统,Android系统
可提供的1.0.0及更高版本
显示
show({params})
id:
类型:字符串 描述:导航条的id
animation:
orientation:
var NVNavigationBar = api.require('NVNavigationBar');
NVNavigationBar.show({
id:'first'
});
iOS系统,Android系统
可提供的1.0.0及更高版本
设置选中项
setSelected({params}, callback(ret))
id:
index:
selected:
ret:
{
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({params}, callback(ret))
id:
index:
item:
{
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'时有效.
}
}
ret:
{
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({params}, callback(ret))
id:
index:
ret:
{
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({params}, callback(ret))
id:
index:
item:
{
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'时有效.
}
}
ret:
{
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({params}, callback(ret))
id:
items:
[{
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'时有效.
}
}]
ret:
{
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及更高版本
设置item居左、居右、居上、居下
setItemLocation({params})
id:
locationType:
index:
var NVNavigationBar = api.require('NVNavigationBar');
NVNavigationBar.setItemLocation({
locationType:'right',
index:4
});
Android系统,iOS系统
可提供的1.0.0及更高版本
为帮助用户更好更快的使用插件,论坛维护了一个示例,示例中包含示例代码、知识点讲解、注意事项等,供您参考。