NVTabBarAnimation

论坛示例

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

概述

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

open

打开插件并显示

open({params}, callback(ret))

params

styles:

  • 类型:JSON 对象
  • 描述:插件样式配置
  • 默认值:见内部字段
  • 内部字段:
{
    bg: '#fff',         //(可选项)字符串类型;插件背景,支持 rgb、rgba、#、img;默认:#ffffff
    h: 50 ,             //(可选项)数字类型;插件的高度(含分割线);默认:50
    dividingLine: {     //(可选项)JSON对象;插件顶部的分割线配置
       width: 0.5,      //(可选项)数字类型;分割线粗细;默认:0.5
       color: '#000'    //(可选项)字符串类型;分割线颜色;默认:#000
    },
    badge: {            //(可选项)JSON对象;徽章样式配置;若不传则去内部字段默认值
       bgColor: '#ff0', //(可选项)字符串类型;徽章背景色,支持rgb、rgba、#;默认:#ff0
       numColor: '#fff',//(可选项)字符串类型;徽章数字字体颜色,支持rgb、rgba、#;默认:#fff
       size: 6.0,       //(可选项)数字类型;徽章半径大小;默认值:6.0
       centerX: 6.0,    //(可选项)数字类型;徽章中心点坐标(相对于所属item的背景面板坐标系);默认值:icon图标的右上角
       centerY: 6.0     //(可选项)数字类型;徽章中心点坐标(相对于所属item的背景面板坐标系);默认值:icon图标的右上角
    }
}

items:

  • 类型:数组
  • 描述:导航条子项配置,子项条数不能超过 5
  • 内部字段:
[{
    w: api.winWidth/5.0,      //(可选项)数字类型;子项的宽度(识别点击事件的区域宽度);默认:api.winWidth/items子项总数
    bg: {                     //(可选项)JSON对象;子项背景配置,若不传则取内部字段默认值
          marginB: 0,            //(可选项)数字类型;子项背景距离插件底部的距离,设置大于0的数字可实现凸起效果;默认:0
          image: 'rgba(0,0,0,0)',//(可选项)字符串类型;子项的背景,支持rgb、rgba、#、img(仅支持本地图片路径fs://、widget://);默认:rgba(0,0,0,0)
    },
    icon: {          // JSON对象;子项按钮静态图标配置,值为空则不显示图标
          normal: '',           // 字符串类型;子项按钮常态下的背景图片路径,要求本地路径(fs://、widget://)
          highlight: '',        //(可选项)字符串类型;子项按钮高亮态下的背景图片路径,要求本地路径(fs://、widget://),若不传或传空则无按钮高亮效果
          selected: '',         //(可选项)字符串类型;子项按钮按钮选中后的背景图片路径,要求本地路径(fs://、widget://),若不传或传空则无选中后效果
          rect: {               //(可选项)JSON对象;子项按钮图标的大小配置,位置居中显示;值为空则不显示图标
             w: 25.0,           //(可选项)数字类型;子项按钮图标的宽度;默认:25.0
             h: 25.0,           //(可选项)数字类型;子项按钮图标的高度;默认:25.0
             x:0,               //(可选项)数字类型:子项按钮图标左上顶点x坐标数值,(相对于所属item的背景面板坐标系);默认不填则水平居中(开发时注意0与不填是有区别的)
             y:0,               //(可选项)数字类型:子项按钮图标左上顶点y坐标数值, (相对于所属item的背景面板坐标系);默认值为0
          },
     },
     animationIcons: {          // JSON对象;子项按钮动态图标(动画)配置,值为空则不显示动态图标
          // 注意:本动画状态不受按钮点击事件影响,即无论按钮未选择状态还是选择状态,本动画图标均不做改变。动画的显示、隐藏、改变内部动画图片路径等属性改变,需开发者自行调用item属性设置接口。
          paths: ['','',''],    // 数组对象;组成动态动画的静态图片路径数组。图片路径要求本地路径(fs://、widget://)
          rect: {               //(可选项)JSON对象;子项按钮动态图标的大小配置,位置居中显示;值为空则不显示图标
             w: 25.0,           //(可选项)数字类型;子项按钮图标的宽度;默认:25.0
             h: 25.0,           //(可选项)数字类型;子项按钮图标的高度;默认:25.0
             x:0,               //(可选项)数字类型:子项按钮图标左上顶点x坐标数值,(相对于所属item的背景面板坐标系);默认不填则水平居中(开发时注意0与不填是有区别的)
             y:0                //(可选项)数字类型:子项按钮图标左上顶点y坐标数值, (相对于所属item的背景面板坐标系);默认值:0
          },
          interval:100          //动画的静态图片切换间隔时间,单位ms,默认:100
     },
     title: {                    //(可选项)JSON对象;子项标题配置,值为空则不显示标题文字
          text: '',              //(可选项)字符串类型;子项按钮下面的标题文字,若不传或传空则不显示
          size: 12.0,            //(可选项)数字类型;子项标题文字大小;默认:12.0  
          normal: '#696969',     //(可选项)字符串类型;子项标题文字常态颜色;默认:#696969
          selected: '#ff0',      //(可选项)字符串类型;子项标题文字选中后颜色;默认:#ff0
          marginB: 6.0,          //(可选项)数字类型;子项标题距离插件下边缘的距离;默认:6.0
          ttf:'Alkatip Basma Tom'//(可选项)字符串类型;默认值:当前系统字体;
                                本参数在 iOS 平台上表示字体名称 (必须已在 config 文件内配置 ttf 文件(https://developer.yonyou.com/docs/Technical-Topics/Introduction-Config-Config_Xml#14-1),并在 widget 包内包含该 ttf 文件);
                                本参数在 android 平台上表示 ttf 文件路径,要求本地路径(fs://、widget://)
      },
      rect: {                    //(可选项)JSON对象;子项按钮标题的大小配置,位置水平居中显示;默认值见内部字段
          w: api.winWidth/items, //(可选项)数字类型;子项按钮图标的宽度;默认:整个item宽度
          x:0,                   //(可选项)数字类型:子项按钮标题左上顶点x坐标数值,(相对于所属item的背景面板坐标系);默认不填则水平居中(开发时注意0与不填是有区别的)
          y:0,                   //(可选项)数字类型:子项按钮图标左上顶点y坐标数值, (相对于所属item的背景面板坐标系);默认值:0
       },
}]

selectedIndex:

  • 类型:数字
  • 描述:(可选项)默认值为选中状态的按钮的索引,若不传则默认无选中项

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    eventType: 'show',      //字符串类型;交互事件类型,取值范围如下:
                            //show:打开插件并显示事件
                            //click:用户点击插件内子按钮事件
    index:0                 //数字类型;用户点击按钮的索引,仅当 eventType 为 click 时有值
}

示例代码

var NVTabBarAnimation = api.require('NVTabBarAnimation');
        NVTabBarAnimation.open({
            styles: {
                bg: '#fff',
                h: 58,
                dividingLine: {
                    width: 0.5,
                    color: '#ccc'
                },
                badge: {
                    bgColor: '#f45815',
                    numColor: '#fff',
                    size: 7.0
                }
            },
            items: [{
                w: api.winWidth / 5.0,
                bg: {
                    marginB: 0,
                    image: 'rgba(0,0,0,0)',
                },
                icon: {
                    normal: 'widget://res/NVTabBarAnimation/1.png',
                    highlight: 'widget://res/NVTabBarAnimation/11.png',
                    rect: {
                        w: 25.0,
                        h: 25.0,
                        x: 0,
                        y: 0,
                    },
                },
                animationIcons: {
                    paths: ['widget://res/NVTabBarAnimation/1.png', 'widget://res/NVTabBarAnimation/2.png', 'widget://res/NVTabBarAnimation/3.png'],
                    rect: {
                        w: 25.0,
                        h: 25.0,
                        x: 0,
                        y: 0
                    },
                    interval: 300
                },
                title: {
                    text: '首页',
                    size: 12.0,
                    normal: '#696969',
                    selected: '#ff0',
                    marginB: 6.0,
                    ttf: 'Alkatip Basma Tom'

                },
                rect: {
                    w: api.winWidth / 5.0,
                    x: 0,
                    y: 0,
                },
            }, {
                w: api.winWidth / 5.0,
                bg: {
                    marginB: 0,
                    image: 'rgba(0,0,0,0)',
                },
                icon: {
                    normal: 'widget://res/NVTabBarAnimation/2.png',
                    highlight: 'widget://res/NVTabBarAnimation/22.png',
                    rect: {
                        w: 25.0,
                        h: 25.0,
                        x: 0,
                        y: 0,
                    },
                },
                animationIcons: {
                    paths: ['widget://res/NVTabBarAnimation/1.png', 'widget://res/NVTabBarAnimation/2.png', 'widget://res/NVTabBarAnimation/3.png'],
                    rect: {
                        w: 25.0,
                        h: 25.0,
                        x: 0,
                        y: 0
                    },
                    interval: 300
                },
                title: {
                    text: '商圈',
                    size: 12.0,
                    normal: '#696969',
                    selected: '#ff0',
                    marginB: 6.0,
                    ttf: 'Alkatip Basma Tom'

                },
                rect: {
                    w: api.winWidth / 5.0,
                    x: 0,
                    y: 0,
                },
            }, {
                w: api.winWidth / 5.0,
                bg: {
                    marginB: 0,
                    image: 'rgba(0,0,0,0)',
                },
                icon: {
                    normal: 'widget://res/NVTabBarAnimation/3.png',
                    highlight: 'widget://res/NVTabBarAnimation/33.png',
                    rect: {
                        w: 25.0,
                        h: 25.0,
                        x: 0,
                        y: 0,
                    },
                },
                animationIcons: {
                    paths: ['widget://res/NVTabBarAnimation/1.png', 'widget://res/NVTabBarAnimation/2.png', 'widget://res/NVTabBarAnimation/3.png'],
                    rect: {
                        w: 25.0,
                        h: 25.0,
                        x: 0,
                        y: 0
                    },
                    interval: 300
                },
                title: {
                    text: '地图',
                    size: 12.0,
                    normal: '#696969',
                    selected: '#ff0',
                    marginB: 6.0,
                    ttf: 'Alkatip Basma Tom'

                },
                rect: {
                    w: api.winWidth / 5.0,
                    x: 0,
                    y: 0,
                },
            }, {
                w: api.winWidth / 5.0,
                bg: {
                    marginB: 0,
                    image: 'rgba(0,0,0,0)',
                },
                icon: {
                    normal: 'widget://res/NVTabBarAnimation/4.png',
                    highlight: 'widget://res/NVTabBarAnimation/44.png',
                    rect: {
                        w: 25.0,
                        h: 25.0,
                        x: 0,
                        y: 0,
                    },
                },
                animationIcons: {
                    paths: ['widget://res/NVTabBarAnimation/1.png', 'widget://res/NVTabBarAnimation/2.png', 'widget://res/NVTabBarAnimation/3.png'],
                    rect: {
                        w: 25.0,
                        h: 25.0,
                        x: 0,
                        y: 0
                    },
                    interval: 300
                },
                title: {
                    text: '广场',
                    size: 12.0,
                    normal: '#696969',
                    selected: '#ff0',
                    marginB: 6.0,
                    ttf: 'Alkatip Basma Tom'

                },
                rect: {
                    w: api.winWidth / 5.0,
                    x: 0,
                    y: 0,
                },
            }, {
                w: api.winWidth / 5.0,
                bg: {
                    marginB: 0,
                    image: 'rgba(0,0,0,0)',
                },
                icon: {
                    normal: 'widget://res/NVTabBarAnimation/5.png',
                    highlight: 'widget://res/NVTabBarAnimation/55.png',
                    rect: {
                        w: 25.0,
                        h: 25.0,
                        x: 0,
                        y: 0,
                    },
                },
                animationIcons: {
                    paths: ['widget://res/NVTabBarAnimation/1.png', 'widget://res/NVTabBarAnimation/2.png', 'widget://res/NVTabBarAnimation/3.png'],
                    rect: {
                        w: 25.0,
                        h: 25.0,
                        x: 0,
                        y: 0
                    },
                    interval: 300
                },
                title: {
                    text: '我的',
                    size: 12.0,
                    normal: '#696969',
                    selected: '#ff0',
                    marginB: 6.0,
                    ttf: 'Alkatip Basma Tom'

                },
                rect: {
                    w: api.winWidth / 5.0,
                    x: 0,
                    y: 0,
                },
            }],
            selectedIndex: 0
        }, function(ret, err) {
            if (ret && ret.eventType == "click") {
                api.alert({msg: JSON.stringify(ret)});
            }
        });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

hide

隐藏插件(并没有从内存清除)

hide();

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

show

显示已隐藏的插件

show();

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

close

关闭插件,并从内存里清除

close()

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setBadge

设置按钮右上角的徽章

setBadge({params})

params

index:

  • 类型:数字
  • 说明:(可选项)要设置的子项的下标
  • 默认值:0

badge:

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

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setItemAttr

设置按钮 item 的属性

setItemAttr({params})

params

index:

  • 类型:数字
  • 描述:(可选项)要设置的子项的索引
  • 默认值:0

selected:

  • 类型:布尔
  • 描述:(可选项)要设置的子项按钮的选中状态,true:选中状态|false:非选中状态
  • 默认值:true

icon:

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

animationIcons:

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

title:

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

示例代码

var NVTabBarAnimation = api.require('NVTabBarAnimation');
      NVTabBarAnimation.setItemAttr({
      index:1,
      selected:true,
      icon:{
        normal:'',
        highlight:'',
        selected:'',
      },
      animationIcons:{
        paths: ['','',''],
        interval:300,
      },
      title:{
        text: 'll',
        size: 12.0,
        normal: '#696969',
        selected: '#ff0',
        marginB: 6.0
      },function(ret, err) {
        api.alert({msg: JSON.stringify(ret)});
      }
    });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

bringToFront

将已经打开的插件置为最上层显示

bringToFront()

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

论坛示例

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

是否仍需要帮助? 请保持联络!
最后更新于 2024/10/21