NVTabBarAnimation

来自于：APICloud立即使用

open hide show close setBadge setItemAttr bringToFront

论坛示例

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

概述

NVTabBarAnimation 是一个底部导航条模块，该模块依附于当前主 window 。开发者可通过相应接口参数自定义其样式，设置、取消选中状态，动态配置 item 的徽章（badge）等功能。相比较NVTabbar，本模块增加了动态icon（类似gif图的动画）的展示和动态、静态切换功能，开发者可在模块初始化或之后调用相应接口进行设置。

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.        centerX: 6.0,    //（可选项）数字类型；徽章中心点坐标（相对于所属item的背景面板坐标系）；默认值：icon图标的右上角
  13.        centerY: 6.0     //（可选项）数字类型；徽章中心点坐标（相对于所属item的背景面板坐标系）；默认值：icon图标的右上角
  14.     }
  15. }

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.     icon: {          // JSON对象；子项按钮静态图标配置，值为空则不显示图标
  8.           normal: '',           // 字符串类型；子项按钮常态下的背景图片路径，要求本地路径（fs://、widget://）
  9.           highlight: '',        //（可选项）字符串类型；子项按钮高亮态下的背景图片路径，要求本地路径（fs://、widget://），若不传或传空则无按钮高亮效果
  10.           selected: '',         //（可选项）字符串类型；子项按钮按钮选中后的背景图片路径，要求本地路径（fs://、widget://），若不传或传空则无选中后效果
  11.           rect: {               //（可选项）JSON对象；子项按钮图标的大小配置，位置居中显示；值为空则不显示图标
  12.              w: 25.0,           //（可选项）数字类型；子项按钮图标的宽度；默认：25.0
  13.              h: 25.0,           //（可选项）数字类型；子项按钮图标的高度；默认：25.0
  14.              x:0,               //（可选项）数字类型：子项按钮图标左上顶点x坐标数值，（相对于所属item的背景面板坐标系）；默认不填则水平居中（开发时注意0与不填是有区别的）
  15.              y:0,               //（可选项）数字类型：子项按钮图标左上顶点y坐标数值, （相对于所属item的背景面板坐标系）；默认值为0
  16.           },
  17.      },
  18.      animationIcons: {          // JSON对象；子项按钮动态图标（动画）配置，值为空则不显示动态图标
  19.           // 注意：本动画状态不受按钮点击事件影响，即无论按钮未选择状态还是选择状态，本动画图标均不做改变。动画的显示、隐藏、改变内部动画图片路径等属性改变，需开发者自行调用item属性设置接口。
  20.           paths: ['','',''],    // 数组对象；组成动态动画的静态图片路径数组。图片路径要求本地路径（fs://、widget://）
  21.           rect: {               //（可选项）JSON对象；子项按钮动态图标的大小配置，位置居中显示；值为空则不显示图标
  22.              w: 25.0,           //（可选项）数字类型；子项按钮图标的宽度；默认：25.0
  23.              h: 25.0,           //（可选项）数字类型；子项按钮图标的高度；默认：25.0
  24.              x:0,               //（可选项）数字类型：子项按钮图标左上顶点x坐标数值，（相对于所属item的背景面板坐标系）；默认不填则水平居中（开发时注意0与不填是有区别的）
  25.              y:0                //（可选项）数字类型：子项按钮图标左上顶点y坐标数值, （相对于所属item的背景面板坐标系）；默认值:0
  26.           },
  27.           interval:100          //动画的静态图片切换间隔时间，单位ms，默认:100
  28.      },
  29.      title: {                    //（可选项）JSON对象；子项标题配置，值为空则不显示标题文字
  30.           text: '',              //（可选项）字符串类型；子项按钮下面的标题文字，若不传或传空则不显示
  31.           size: 12.0,            //（可选项）数字类型；子项标题文字大小；默认：12.0  
  32.           normal: '#696969',     //（可选项）字符串类型；子项标题文字常态颜色；默认：#696969
  33.           selected: '#ff0',      //（可选项）字符串类型；子项标题文字选中后颜色；默认：#ff0
  34.           marginB: 6.0,          //（可选项）数字类型；子项标题距离模块下边缘的距离；默认：6.0
  35.           ttf:'Alkatip Basma Tom'//（可选项）字符串类型；默认值：当前系统字体；
  36.                                 本参数在 iOS 平台上表示字体名称 （必须已在 config 文件内配置 ttf 文件(//docs.apicloud.com/Dev-Guide/app-config-manual#14-1)，并在 widget 包内包含该 ttf 文件）；
  37.                                 本参数在 android 平台上表示 ttf 文件路径，要求本地路径（fs://、widget://）
  38.       },
  39.       rect: {                    //（可选项）JSON对象；子项按钮标题的大小配置，位置水平居中显示；默认值见内部字段
  40.           w: api.winWidth/items, //（可选项）数字类型；子项按钮图标的宽度；默认：整个item宽度
  41.           x:0,                   //（可选项）数字类型：子项按钮标题左上顶点x坐标数值，（相对于所属item的背景面板坐标系）；默认不填则水平居中（开发时注意0与不填是有区别的）
  42.           y:0,                   //（可选项）数字类型：子项按钮图标左上顶点y坐标数值, （相对于所属item的背景面板坐标系）；默认值:0
  43.        },
  44. }]

selectedIndex：

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

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     eventType: 'show',      //字符串类型；交互事件类型，取值范围如下：
  3.                             //show：打开模块并显示事件
  4.                             //click：用户点击模块内子按钮事件
  5.     index:0                 //数字类型；用户点击按钮的索引，仅当 eventType 为 click 时有值
  6. }

示例代码

  1. var NVTabBarAnimation = api.require('NVTabBarAnimation');
  2.         NVTabBarAnimation.open({
  3.             styles: {
  4.                 bg: '#fff',
  5.                 h: 58,
  6.                 dividingLine: {
  7.                     width: 0.5,
  8.                     color: '#ccc'
  9.                 },
  10.                 badge: {
  11.                     bgColor: '#f45815',
  12.                     numColor: '#fff',
  13.                     size: 7.0
  14.                 }
  15.             },
  16.             items: [{
  17.                 w: api.winWidth / 5.0,
  18.                 bg: {
  19.                     marginB: 0,
  20.                     image: 'rgba(0,0,0,0)',
  21.                 },
  22.                 icon: {
  23.                     normal: 'widget://res/NVTabBarAnimation/1.png',
  24.                     highlight: 'widget://res/NVTabBarAnimation/11.png',
  25.                     rect: {
  26.                         w: 25.0,
  27.                         h: 25.0,
  28.                         x: 0,
  29.                         y: 0,
  30.                     },
  31.                 },
  32.                 animationIcons: {
  33.                     paths: ['widget://res/NVTabBarAnimation/1.png', 'widget://res/NVTabBarAnimation/2.png', 'widget://res/NVTabBarAnimation/3.png'],
  34.                     rect: {
  35.                         w: 25.0,
  36.                         h: 25.0,
  37.                         x: 0,
  38.                         y: 0
  39.                     },
  40.                     interval: 300
  41.                 },
  42.                 title: {
  43.                     text: '首页',
  44.                     size: 12.0,
  45.                     normal: '#696969',
  46.                     selected: '#ff0',
  47.                     marginB: 6.0,
  48.                     ttf: 'Alkatip Basma Tom'
  50.                 },
  51.                 rect: {
  52.                     w: api.winWidth / 5.0,
  53.                     x: 0,
  54.                     y: 0,
  55.                 },
  56.             }, {
  57.                 w: api.winWidth / 5.0,
  58.                 bg: {
  59.                     marginB: 0,
  60.                     image: 'rgba(0,0,0,0)',
  61.                 },
  62.                 icon: {
  63.                     normal: 'widget://res/NVTabBarAnimation/2.png',
  64.                     highlight: 'widget://res/NVTabBarAnimation/22.png',
  65.                     rect: {
  66.                         w: 25.0,
  67.                         h: 25.0,
  68.                         x: 0,
  69.                         y: 0,
  70.                     },
  71.                 },
  72.                 animationIcons: {
  73.                     paths: ['widget://res/NVTabBarAnimation/1.png', 'widget://res/NVTabBarAnimation/2.png', 'widget://res/NVTabBarAnimation/3.png'],
  74.                     rect: {
  75.                         w: 25.0,
  76.                         h: 25.0,
  77.                         x: 0,
  78.                         y: 0
  79.                     },
  80.                     interval: 300
  81.                 },
  82.                 title: {
  83.                     text: '商圈',
  84.                     size: 12.0,
  85.                     normal: '#696969',
  86.                     selected: '#ff0',
  87.                     marginB: 6.0,
  88.                     ttf: 'Alkatip Basma Tom'
  90.                 },
  91.                 rect: {
  92.                     w: api.winWidth / 5.0,
  93.                     x: 0,
  94.                     y: 0,
  95.                 },
  96.             }, {
  97.                 w: api.winWidth / 5.0,
  98.                 bg: {
  99.                     marginB: 0,
  100.                     image: 'rgba(0,0,0,0)',
  101.                 },
  102.                 icon: {
  103.                     normal: 'widget://res/NVTabBarAnimation/3.png',
  104.                     highlight: 'widget://res/NVTabBarAnimation/33.png',
  105.                     rect: {
  106.                         w: 25.0,
  107.                         h: 25.0,
  108.                         x: 0,
  109.                         y: 0,
  110.                     },
  111.                 },
  112.                 animationIcons: {
  113.                     paths: ['widget://res/NVTabBarAnimation/1.png', 'widget://res/NVTabBarAnimation/2.png', 'widget://res/NVTabBarAnimation/3.png'],
  114.                     rect: {
  115.                         w: 25.0,
  116.                         h: 25.0,
  117.                         x: 0,
  118.                         y: 0
  119.                     },
  120.                     interval: 300
  121.                 },
  122.                 title: {
  123.                     text: '地图',
  124.                     size: 12.0,
  125.                     normal: '#696969',
  126.                     selected: '#ff0',
  127.                     marginB: 6.0,
  128.                     ttf: 'Alkatip Basma Tom'
  130.                 },
  131.                 rect: {
  132.                     w: api.winWidth / 5.0,
  133.                     x: 0,
  134.                     y: 0,
  135.                 },
  136.             }, {
  137.                 w: api.winWidth / 5.0,
  138.                 bg: {
  139.                     marginB: 0,
  140.                     image: 'rgba(0,0,0,0)',
  141.                 },
  142.                 icon: {
  143.                     normal: 'widget://res/NVTabBarAnimation/4.png',
  144.                     highlight: 'widget://res/NVTabBarAnimation/44.png',
  145.                     rect: {
  146.                         w: 25.0,
  147.                         h: 25.0,
  148.                         x: 0,
  149.                         y: 0,
  150.                     },
  151.                 },
  152.                 animationIcons: {
  153.                     paths: ['widget://res/NVTabBarAnimation/1.png', 'widget://res/NVTabBarAnimation/2.png', 'widget://res/NVTabBarAnimation/3.png'],
  154.                     rect: {
  155.                         w: 25.0,
  156.                         h: 25.0,
  157.                         x: 0,
  158.                         y: 0
  159.                     },
  160.                     interval: 300
  161.                 },
  162.                 title: {
  163.                     text: '广场',
  164.                     size: 12.0,
  165.                     normal: '#696969',
  166.                     selected: '#ff0',
  167.                     marginB: 6.0,
  168.                     ttf: 'Alkatip Basma Tom'
  170.                 },
  171.                 rect: {
  172.                     w: api.winWidth / 5.0,
  173.                     x: 0,
  174.                     y: 0,
  175.                 },
  176.             }, {
  177.                 w: api.winWidth / 5.0,
  178.                 bg: {
  179.                     marginB: 0,
  180.                     image: 'rgba(0,0,0,0)',
  181.                 },
  182.                 icon: {
  183.                     normal: 'widget://res/NVTabBarAnimation/5.png',
  184.                     highlight: 'widget://res/NVTabBarAnimation/55.png',
  185.                     rect: {
  186.                         w: 25.0,
  187.                         h: 25.0,
  188.                         x: 0,
  189.                         y: 0,
  190.                     },
  191.                 },
  192.                 animationIcons: {
  193.                     paths: ['widget://res/NVTabBarAnimation/1.png', 'widget://res/NVTabBarAnimation/2.png', 'widget://res/NVTabBarAnimation/3.png'],
  194.                     rect: {
  195.                         w: 25.0,
  196.                         h: 25.0,
  197.                         x: 0,
  198.                         y: 0
  199.                     },
  200.                     interval: 300
  201.                 },
  202.                 title: {
  203.                     text: '我的',
  204.                     size: 12.0,
  205.                     normal: '#696969',
  206.                     selected: '#ff0',
  207.                     marginB: 6.0,
  208.                     ttf: 'Alkatip Basma Tom'
  210.                 },
  211.                 rect: {
  212.                     w: api.winWidth / 5.0,
  213.                     x: 0,
  214.                     y: 0,
  215.                 },
  216.             }],
  217.             selectedIndex: 0
  218.         }, function(ret, err) {
  219.             if (ret && ret.eventType == "click") {
  220.                 alert(JSON.stringify(ret));
  221.             }
  222.         });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

hide

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

hide();

示例代码

  1. var NVTabBarAnimation = api.require('NVTabBarAnimation');
  2. NVTabBarAnimation.hide();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

show

显示已隐藏的模块

show();

示例代码

  1. var NVTabBarAnimation = api.require('NVTabBarAnimation');
  2. NVTabBarAnimation.show();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

close

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

close()

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

setBadge

设置按钮右上角的徽章

setBadge({params})

params

index:

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

badge：

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

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

setItemAttr

设置按钮 item 的属性

setItemAttr({params})

params

index：

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

selected：

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

icon:

  • 类型：JSON 对象
  • 描述：（可选项）要设置的子项按钮的 icon 静态图标，若不传则显示原值
  • 内部字段：
  1. { 
  2.         normal: '',          //（可选项）字符串类型；子项按钮常态下的背景图片路径，要求本地路径（fs://、widget://）
  3.         highlight: '',       //（可选项）字符串类型；子项按钮高亮态下的背景图片路径，要求本地路径（fs://、widget://），若不传或传空则无按钮高亮效果
  4.         selected: '',        //（可选项）字符串类型；子项按钮按钮选中后的背景图片路径，要求本地路径（fs://、widget://），若不传或传空则无选中后效果
  5. }

animationIcons:

  • 类型：JSON 对象
  • 描述：（可选项）要设置的子项按钮的 icon 动态图标，若不传则显示原值
  • 内部字段：
  1. { 
  2.         paths: ['','',''], // （可选项）数组对象；组成动态动画的静态图片路径数组。图片路径要求本地路径（fs://、widget://）
  3.         //注意：本参数添加后会覆盖替换原open中设置的参数，若不传则保持原值
  4.         interval:300,      //（可选项）动画的静态图片切换间隔时间，单位ms
  5. },

title:

  • 类型：JSON 对象
  • 描述：（可选项）子项标题设置，若不传则显示原值
  • 内部字段：
  1. {     
  2.        text: '',               //（可选项）字符串类型；子项按钮下面的标题文字，传入则替换原open中设定的值
  3.        size: 12.0,             //（可选项）数字类型；子项标题文字大小；
  4.        normal: '#696969',      //（可选项）字符串类型；子项标题文字常态颜色；默认：#696969
  5.        selected: '#ff0',       //（可选项）字符串类型；子项标题文字选中后颜色；默认：#ff0
  6. }

示例代码

  1. var NVTabBarAnimation = api.require('NVTabBarAnimation');
  2.       NVTabBarAnimation.setItemAttr({
  3.       index:1,
  4.       selected:true,
  5.       icon:{
  6.         normal:'',
  7.         highlight:'',
  8.         selected:'',
  9.       },
  10.       animationIcons:{
  11.         paths: ['','',''],
  12.         interval:300,
  13.       },
  14.       title:{
  15.         text: 'll',
  16.         size: 12.0,
  17.         normal: '#696969',
  18.         selected: '#ff0',
  19.         marginB: 6.0
  20.       },function(ret, err) {
  21.         alert(JSON.stringify(ret));
  22.       }
  23.     });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

bringToFront

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

bringToFront()

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

论坛示例

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