NVNavigationBar

来自于：官方立即使用

• Method

open close hide show setSelected insertItem deleteItem updateItem update

论坛示例

为帮助用户更好更快的使用模块，论坛维护了一个示例，示例中包含示例代码、知识点讲解、注意事项等，供您参考。

概述

本模块是 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 文件(//docs.apicloud.com/Dev-Guide/app-config-manual#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) {
    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及更高版本

论坛示例

为帮助用户更好更快的使用模块，论坛维护了一个示例，示例中包含示例代码、知识点讲解、注意事项等，供您参考。