NVTabBarAnimation

hide close setItemAttr

论坛示例

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

概述

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

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

hide

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

hide();

示例代码

可用性

可提供的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. });

可提供的1.0.0及更高版本

setItemAttr

设置按钮 item 的属性

setItemAttr({params})

params

index：

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

selected：

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

icon:

  • 类型：JSON 对象
  • 描述：（可选项）要设置的子项按钮的 icon 静态图标，若不传则显示原值
  • 内部字段：

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

bringToFront

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

bringToFront()

示例代码

可用性

iOS系统，Android系统

论坛示例

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