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
    bgAlpha: 1,                    //(可选项)背景透明的配置,取值范围:0-1;默认:1
   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 文件(//docs.apicloud.com/Dev-Guide/app-config-manual#14-1),并在 widget 包内包含该 ttf 文件);
                                    本参数在 android 平台上表示 ttf 文件路径,要求本地路径(fs://、widget://)
   },
   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
   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) {
    alert(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) {
    alert(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) {
    alert(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) {
    alert(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) {
    alert(JSON.stringify(ret));
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本