废话不说，直接上代码
模块地址：https://docs.apicloud.com/Client-API/Nav-Menu/NVTabBar
代码实例：
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"> <link rel="stylesheet" type="text/css" href="./css/aui.css" /> </head> <body> <header class="aui-bar aui-bar-nav" id="aui-header"> <a class="aui-btn aui-pull-left"> <span class="aui-iconfont aui-icon-left"></span> </a> <div class="aui-title" id="header"></div> </header> </body> <script type="text/javascript" src="./script/api.js"></script> <script type="text/javascript"> apiready = function() { api.parseTapmode(); var header = $api.byId('aui-header'); $api.fixStatusBar(header); var headerPos = $api.offset(header); var body_h = $api.offset($api.dom('body')).h; var NVTabBar = api.require('NVTabBar'); NVTabBar.open({ styles : { bg : 'rgba(200,200,200,1)', h : 54, dividingLine : { width : 0, color : '#000' }, badge : { bgColor : '#f00', numColor : '#000', size : 6.0, centerY : 2 } }, items : [{ w : api.winWidth / 5.0, iconRect : { w : 25.0, h : 25.0, }, icon : { normal : 'widget://image/nvtabbar/acti.png', highlight : 'widget://image/nvtabbar/actied.png', selected : 'widget://image/nvtabbar/actied.png' }, title : { text : '动态', size : 12.0, normal : '#696969', selected : '#eb4f38', marginB : 6.0 } }, { w : api.winWidth / 5.0, iconRect : { w : 25.0, h : 25.0, }, icon : { normal : 'widget://image/nvtabbar/guan.png', highlight : 'widget://image/nvtabbar/guaned.png', selected : 'widget://image/nvtabbar/guaned.png' }, title : { text : '发现', size : 12.0, normal : '#696969', selected : '#eb4f38', marginB : 6.0 } }, { w : api.winWidth / 5.0, bg : { marginB : 0, image : 'rgba(200,200,200,0)' }, iconRect : { w : 50, h : 50, }, icon : { normal : 'widget://image/nvtabbar/yyuan.png', highlight : 'widget://image/nvtabbar/mai.png', selected : 'widget://image/nvtabbar/mai.png' } }, { w : api.winWidth / 5.0, iconRect : { w : 25.0, h : 25.0, }, icon : { normal : 'widget://image/nvtabbar/bir.png', highlight : 'widget://image/nvtabbar/bired.png', selected : 'widget://image/nvtabbar/bired.png' }, title : { text : '消息', size : 12.0, normal : '#696969', selected : '#eb4f38', marginB : 6.0 } }, { w : api.winWidth / 5.0, iconRect : { w : 25.0, h : 25.0, }, icon : { normal : 'widget://image/nvtabbar/fav.png', highlight : 'widget://image/nvtabbar/faved.png', selected : 'widget://image/nvtabbar/faved.png' }, title : { text : '我的', size : 12.0, normal : '#696969', selected : '#eb4f38', marginB : 6.0 } }], selectedIndex : 0 }, function(ret, err) { //alert(JSON.stringify(ret)) if (ret) { if (ret.eventType == "show") { $api.html(header, '动态'); api.openFrame({ name : 'frame0', url : './html/frame0.html', rect : { x : 0, y : headerPos.h, w : 'auto', h : api.winHeight - headerPos.h - 54 } }) } if (ret.eventType == "click" && ret.index == 0) { $api.html(header, '动态'); api.openFrame({ name : 'frame0', url : './html/frame0.html', rect : { x : 0, y : headerPos.h, w : 'auto', h : api.winHeight - headerPos.h - 54 } }) } if (ret.eventType == "click" && ret.index == 1) { $api.html(header, '发现'); api.openFrame({ name : 'frame1', url : './html/frame1.html', rect : { x : 0, y : headerPos.h, w : 'auto', h : api.winHeight - headerPos.h - 54 } }) } if (ret.eventType == "click" && ret.index == 2) { $api.html(header, '圈子'); api.openFrame({ name : 'frame2', url : './html/frame2.html', rect : { x : 0, y : headerPos.h, w : 'auto', h : api.winHeight - headerPos.h - 54 } }) } if (ret.eventType == "click" && ret.index == 3) { $api.html(header, '消息'); api.openFrame({ name : 'frame3', url : './html/frame3.html', rect : { x : 0, y : headerPos.h, w : 'auto', h : api.winHeight - headerPos.h - 54 } }) } if (ret.eventType == "click" && ret.index == 4) { $api.html(header, '我的'); api.openFrame({ name : 'frame4', url : './html/frame4.html', rect : { x : 0, y : headerPos.h, w : 'auto', h : api.winHeight - headerPos.h - 54 } }) } var NVTabBar = api.require('NVTabBar'); NVTabBar.bringToFront(); } }); }; </script> </html>
效果图：
