NVTabBar

open show setBadge bringToFront

论坛示例

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

概述

NVTabBar 是一个底部导航条模块，该模块依附于当前主 window 。开发者可通过相应接口参数自定义其样式，设置、取消选中状态，动态配置 item 的徽章（badge）等功能。

注意:本模块已经适配iPhoneX以上机型，所以iPhoneX以上机型的高度比设置的高度多了34。在使用过程中，如果需要计算frame的高度，请判断一下是否为iPhoneX以上机型,如果是，在减去模块高度基础上再减去34，即可。已避免当前的页面盖住底部导航条的现象出现。

本模块可实现的效果图如下所示：

NVTabBar - 图1

open

打开模块并显示

open({params}, callback(ret))

styles：

  • 类型：JSON 对象
  • 描述：模块样式配置
  • 默认值：见内部字段
  • 内部字段：

items：

  • 类型：数组
  • 描述：导航条子项配置，子项条数不能超过 5
  • 内部字段：
  2.     w: api.winWidth/5.0,      //（可选项）数字类型；子项的宽度（识别点击事件的区域宽度）；默认：api.winWidth/items子项总数
  3.     bg: {                     //（可选项）JSON对象；子项背景配置，若不传则取内部字段默认值
  4.        marginB: 0,            //（可选项）数字类型；子项背景距离模块底部的距离，设置大于0的数字可实现凸起效果；默认：0
  5.        image: 'rgba(0,0,0,0)',//（可选项）字符串类型；子项的背景，支持rgb、rgba、#、img（仅支持本地图片路径fs://、widget://）；默认：rgba(0,0,0,0)
  6.     },
  7.     iconRect: {               //（可选项）JSON对象；子项按钮图标的大小配置，位置居中显示；默认值见内部字段
  8.        h: 25.0,               //（可选项）数字类型；子项按钮图标的高度；默认：25.0
  9.     },
  10.     icon: {                   // JSON对象；子项按钮图标配置
  11.         normal: '',           // 字符串类型；子项按钮常态下的背景图片路径，要求本地路径（fs://、widget://）
  12.         highlight: '',        //（可选项）字符串类型；子项按钮高亮态下的背景图片路径，要求本地路径（fs://、widget://），若不传或传空则无按钮高亮效果
  13.         selected: ''          //（可选项）字符串类型；子项按钮按钮选中后的背景图片路径，要求本地路径（fs://、widget://），若不传或传空则无选中后效果
  14.     },
  15.     title: {                  //（可选项）JSON对象；子项标题配置，若不传则不显示
  16.        text: '',              //（可选项）字符串类型；子项按钮下面的标题文字，若不传或传空则不显示
  17.        size: 12.0,            //（可选项）数字类型；子项标题文字大小；默认：12.0  
  18.        normal: '#696969',     //（可选项）字符串类型；子项标题文字常态颜色；默认：#696969
  20.        marginB: 6.0           //（可选项）数字类型；子项标题距离模块下边缘的距离；默认：6.0
  21.        ttf:'Alkatip Basma Tom'//（可选项）字符串类型；默认值：当前系统字体；
  22.                                 本参数在 iOS 平台上表示字体名称 （必须已在 config 文件内配置 ttf 文件(//docs.apicloud.com/Dev-Guide/app-config-manual#14-1)，并在 widget 包内包含该 ttf 文件）；
  23.                                 本参数在 android 平台上表示 ttf 文件路径，要求本地路径（fs://、widget://）
  24.     }
  25. }]

cursorInOptions：

  • 类型：JSON 对象
  • 描述：选中项的游标(如当前激活状态的item底部显示5pt高度的色块) 若不传，该字段无效
  • 内部字段：
  1. {
  2.     width: 10, //游标的宽
  3.     height:10, //游标的高
  4.     color:'rgba(0,0,0,0)' //游标的颜色，支持图片
  5. }

selectedIndex：

  • 类型：数字
  • 描述：（可选项）默认值为选中状态的按钮的索引，若不传则默认无选中项

enableDoubleClick：

  • 类型：布尔
  • 描述：使能双击事件，默认：false

enableLongPressClick：

  • 类型：布尔
  • 描述：是否使用长按事件，默认：false

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     eventType: 'show',      //字符串类型；交互事件类型，取值范围如下：
  3.                             //show：打开模块并显示事件
  4.                             //click：用户点击模块内子按钮事件
  5.                             //doubleClick：用户双击模块内子按钮事件，只有enableDoubleClick为true且触发双击时回调
  6.                             //longPressclick：用户长按模块内子按钮事件，只有enableLongPressClick为true且触发长按时回调
  9. }

示例代码

可用性

iOS系统，Android系统

hide

隐藏模块（并没有从内存清除）

hide({params});

params

animation：

  • 类型：布尔
  • 描述：（可选项）显示是否添加动画（淡入淡出的动画）

示例代码

  1. var NVTabBar = api.require('NVTabBar');
  2. NVTabBar.hide({
  3. animation:false
  4. });

iOS系统，Android系统

可提供的1.0.0及更高版本

show

显示已隐藏的模块

show({params});

params

animation：

  • 类型：布尔
  • 描述：（可选项）显示是否添加动画（淡入淡出的动画）
  • 默认：false

示例代码

  1. var NVTabBar = api.require('NVTabBar');
  2. NVTabBar.show({
  3. animation:false
  4. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

close

关闭模块，并从内存里清除

close()

示例代码

  1. var NVTabBar = api.require('NVTabBar');
  2. NVTabBar.close();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

setBadge

设置按钮右上角的徽章

setBadge({params})

  • 类型：数字
  • 说明：（可选项）要设置的子项的下标
  • 默认值：0

badge：

  • 类型：字符串
  • 说明：（可选项）要设置的徽章的内容
  • 备注：若不传则表示清除已显示的徽章，若传空字符串则显示小红点（大小为徽章的1.0/2.0）

horizentalPadding:

  • 类型：字符串
  • 说明：设置badge水平方向（左右）内边距（不传该参数无效，该参数暂仅支持Android）

示例代码

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

setSelect

设置按钮的选中状态

setSelect({params})

params

index：

  • 类型：数字
  • 描述：（可选项）要设置的子项的索引
  • 默认值：0

selected：

  • 类型：布尔
  • 描述：（可选项）要设置的子项按钮的状态
  • 默认值：true

icons：

  • 类型：数组
  • 描述：（可选项）设置子按钮的多图联播效果（gif图效果），若不传本参数则默认显示open接口内配置的图片
  • 示例代码：
  1. ['fs://res/gif1.png','fs://res/gif2.png','fs://res/gif3.png','fs://res/gif4.png','fs://res/gif5.png','fs://res/gif6.png']

interval:

  • 类型：数字
  • 描述：（可选项）动画帧之间的时间间隔（单位:毫秒 ms）
  • 默认：300

animatedRepetitions：

  • 类型：数字
  • 描述：（可选项）设置动画重复次数（android仅支持循环一次和无线循环，即该参数只对1和0有效）
  • 默认：0 (无限循环)

示例代码

  1. var NVTabBar = api.require('NVTabBar');
  2. NVTabBar.setSelect({
  3.     index: 1,
  4.     selected: true,
  5.     icons:['fs://res/gif1.png','fs://res/gif2.png','fs://res/gif3.png','fs://res/gif4.png','fs://res/gif5.png','fs://res/gif6.png']
  6. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

bringToFront

将已经打开的模块置为最上层显示

bringToFront()

  2. NVTabBar.bringToFront();

可用性

iOS系统，Android系统

论坛示例

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