NVTabBar

来自于：APICloud 官方立即使用

open hide show close setBadge setSelect bringToFront

论坛示例

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

概述

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

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

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

NVTabBar - 图1 NVTabBar - 图2 NVTabBar - 图3

open

打开模块并显示

open({params}, callback(ret))

params

styles：

  • 类型：JSON 对象
  • 描述：模块样式配置
  • 默认值：见内部字段
  • 内部字段：
  1. {
  2.     bg: '#fff',         //（可选项）字符串类型；模块背景，支持 rgb、rgba、#、img；默认：#ffffff
  3.     h: 50 ,             //（可选项）数字类型；模块的高度（含分割线）；默认：50
  4.     dividingLine: {     //（可选项）JSON对象；模块顶部的分割线配置
  5.        width: 0.5,      //（可选项）数字类型；分割线粗细；默认：0.5
  6.        color: '#000'    //（可选项）字符串类型；分割线颜色；默认：#000
  7.     },
  8.     badge: {            //（可选项）JSON对象；徽章样式配置；若不传则去内部字段默认值
  9.        bgColor: '#ff0', //（可选项）字符串类型；徽章背景色，支持rgb、rgba、#；默认：#ff0
  10.        numColor: '#fff',//（可选项）字符串类型；徽章数字字体颜色，支持rgb、rgba、#；默认：#fff
  11.        size: 6.0,       //（可选项）数字类型；徽章半径大小；默认值：6.0
  12.        fontSize:10      // (可选项) 数字类型;设置徽章字体大小;默认值: 10 ;注意:仅支持iOS。
  13.        centerX: 6.0,    //（可选项）数字类型；徽章中心点坐标（相对于所属item的背景面板坐标系）；默认值：icon图标的右上角
  14.                            注意:iOS1.0.6版本及以后此参数无效
  15.        centerY: 6.0     //（可选项）数字类型；徽章中心点坐标（相对于所属item的背景面板坐标系）；默认值：icon图标的右上角
  16.        rightMargin:0    //（可选项）数字类型；徽章右边距（相对于所属item的背景面板坐标系）；默认值：icon图标的右上角
  17.                            注意:iOS1.0.6版本及以后此参数生效
  18.     }
  19. }

items：

  • 类型：数组
  • 描述：导航条子项配置，子项条数不能超过 5
  • 内部字段：
  1. [{
  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.        w: 25.0,               //（可选项）数字类型；子项按钮图标的宽度；默认：25.0
  9.        h: 25.0,               //（可选项）数字类型；子项按钮图标的高度；默认：25.0
  10.     },
  11.     icon: {                   // JSON对象；子项按钮图标配置
  12.         normal: '',           // 字符串类型；子项按钮常态下的背景图片路径，要求本地路径（fs://、widget://）
  13.         highlight: '',        //（可选项）字符串类型；子项按钮高亮态下的背景图片路径，要求本地路径（fs://、widget://），若不传或传空则无按钮高亮效果
  14.         selected: ''          //（可选项）字符串类型；子项按钮按钮选中后的背景图片路径，要求本地路径（fs://、widget://），若不传或传空则无选中后效果
  15.     },
  16.     title: {                  //（可选项）JSON对象；子项标题配置，若不传则不显示
  17.        text: '',              //（可选项）字符串类型；子项按钮下面的标题文字，若不传或传空则不显示
  18.        size: 12.0,            //（可选项）数字类型；子项标题文字大小；默认：12.0  
  19.        normal: '#696969',     //（可选项）字符串类型；子项标题文字常态颜色；默认：#696969
  20.        selected: '#ff0',      //（可选项）字符串类型；子项标题文字选中后颜色；默认：#ff0
  21.        marginB: 6.0           //（可选项）数字类型；子项标题距离模块下边缘的距离；默认：6.0
  22.        ttf:'Alkatip Basma Tom'//（可选项）字符串类型；默认值：当前系统字体；
  23.                                 本参数在 iOS 平台上表示字体名称 （必须已在 config 文件内配置 ttf 文件(//docs.apicloud.com/Dev-Guide/app-config-manual#14-1)，并在 widget 包内包含该 ttf 文件）；
  24.                                 本参数在 android 平台上表示 ttf 文件路径，要求本地路径（fs://、widget://）
  25.     }
  26. }]

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且触发长按时回调
  8.     index:0                 //数字类型；用户点击按钮的索引，仅当 eventType 为 click和doubleClick 时有值
  9. }

示例代码

  1. var NVTabBar = api.require('NVTabBar');
  2. NVTabBar.open({
  3.     styles: {
  4.         bg: '#333',
  5.         //bg:"widget://image/NVTabBar/tabbar_bg.png",
  6.         h: 65,
  7.         dividingLine: {
  8.             width: 0,
  9.             color: '#000'
  10.         },
  11.         badge: {
  12.             bgColor: '#ff0',
  13.             numColor: '#fff',
  14.             size: 6.0,
  15.             centerX: 40,
  16.             centerY: 6
  17.         }
  18.     },
  19.     items: [{
  20.         w: api.winWidth / 5.0,
  21.         bg: {
  22.             marginB: 0,
  23.             image: 'rgba(200,200,200,0.6)'
  24.         },
  25.         iconRect: {
  26.             w: 25.0,
  27.             h: 25.0,
  28.         },
  29.         icon: {
  30.             normal: 'widget://image/NVTabBar/acti.png',
  31.             highlight: 'widget://image/NVTabBar/actied.png',
  32.             selected: 'widget://image/NVTabBar/actied.png'
  33.         },
  34.         title: {
  35.             text: '动态',
  36.             size: 12.0,
  37.             normal: '#696969',
  38.             selected: '#eb4f38',
  39.             marginB: 6.0
  40.         }
  41.     }, {
  42.         w: api.winWidth / 5.0,
  43.         bg: {
  44.             marginB: 0,
  45.             image: 'rgba(200,200,200,0.7)'
  46.         },
  47.         iconRect: {
  48.             w: 25.0,
  49.             h: 25.0,
  50.         },
  51.         icon: {
  52.             normal: 'widget://image/NVTabBar/guan.png',
  53.             highlight: 'widget://image/NVTabBar/guaned.png',
  54.             selected: 'widget://image/NVTabBar/guaned.png'
  55.         },
  56.         title: {
  57.             text: '发现',
  58.             size: 12.0,
  59.             normal: '#696969',
  60.             selected: '#eb4f38',
  61.             marginB: 6.0
  62.         }
  63.     }, {
  64.         w: api.winWidth / 5.0,
  65.         bg: {
  66.             marginB: 10,
  67.             image: 'widget://image/NVTabBar/yyuan.png' //中间背景图
  68.         },
  69.         iconRect: {
  70.             w: 32,
  71.             h: 32,
  72.         },
  73.         icon: {
  74.             normal: 'widget://image/NVTabBar/mai.png',
  75.             highlight: 'widget://image/NVTabBar/mai.png',
  76.             selected: 'widget://image/NVTabBar/mai.png'
  77.         },
  78.         title: {
  79.             //text : '333',
  80.             size: 0.0,
  81.             normal: '#696969',
  82.             selected: '#eb4f38',
  83.             marginB: 0
  84.         }
  85.     }, {
  86.         w: api.winWidth / 5.0,
  87.         bg: {
  88.             marginB: 0,
  89.             image: 'rgba(200,20,0,0.6)'
  90.         },
  91.         iconRect: {
  92.             w: 25.0,
  93.             h: 25.0,
  94.         },
  95.         icon: {
  96.             normal: 'widget://image/NVTabBar/fav.png',
  97.             highlight: 'widget://image/NVTabBar/faved.png',
  98.             selected: 'widget://image/NVTabBar/faved.png'
  99.         },
  100.         title: {
  101.             text: '消息',
  102.             size: 12.0,
  103.             normal: '#696969',
  104.             selected: '#eb4f38',
  105.             marginB: 6.0
  106.         }
  107.     }, {
  108.         w: api.winWidth / 5.0,
  109.         bg: {
  110.             marginB: 0,
  111.             image: 'rgba(220,0,220,0.7)'
  112.         },
  113.         iconRect: {
  114.             w: 25.0,
  115.             h: 25.0,
  116.         },
  117.         icon: {
  118.             normal: 'widget://image/NVTabBar/bir.png',
  119.             highlight: 'widget://image/NVTabBar/bired.png',
  120.             selected: 'widget://image/NVTabBar/bired.png'
  121.         },
  122.         title: {
  123.             text: '我的',
  124.             size: 12.0,
  125.             normal: '#696969',
  126.             selected: '#eb4f38',
  127.             marginB: 6.0
  128.         }
  129.     }],
  130.     selectedIndex: 0
  131. }, function(ret, err) {
  133. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

hide

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

hide({params});

params

animation：

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

示例代码

  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})

params

index:

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

badge：

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

horizentalPadding:

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

示例代码

  1. var NVTabBar = api.require('NVTabBar');
  2. NVTabBar.setBadge({
  3.     index: 3,
  4.     badge: ''
  5. });

可用性

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()

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

论坛示例

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