<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>主体</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link rel="stylesheet" type="text/css" href="css/mui.css"/> <!--修正样式文件引入--> <link rel="stylesheet" type="text/css" href="css/reset.css"/> </head> <body> <!-- 主页面标题 --> <header class="mui-bar mui-bar-nav reHeaderBoxShadow"> <a class="" href="#offCanvasSide"></a> <h1 class="mui-title" id="title">首页</h1> </header> <!-- 底部nav--> <nav class="mui-bar mui-bar-tab"> <a href="templates/sub1.html" class="mui-tab-item mui-active" id="defaultTab"> <span class="mui-icon mui-icon-home"></span> <span class="mui-tab-label">首页</span> </a> <a href="templates/sub2.html" class="mui-tab-item"> <span class="mui-icon mui-icon-phone"></span> <span class="mui-tab-label">电话</span> </a> <a href="templates/sub3.html" class="mui-tab-item"> <span class="mui-icon mui-icon-email"></span> <span class="mui-tab-label">邮件</span> </a> <a href="templates/sub4.html" class="mui-tab-item"> <span class="mui-icon mui-icon-gear"></span> <span class="mui-tab-label">设置</span> </a> </nav> <script src="js/mui.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> mui.init(); mui('.mui-scroll-wrapper').scroll({ deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006 }); //底部选项卡切换跳转 (function jumpPage(){ //跳转页面 var subpages = ['templates/sub1.html','templates/sub2.html', 'templates/sub3.html', 'templates/sub4.html']; var subpage_style = { top: '44px', bottom: '51px' }; var aniShow = {};//动画显示 //首次启动切滑效果 mui.plusReady(function(){ // launchScreen(); var self = plus.webview.currentWebview(); for (var i = 0; i < 4; i++) { var temp = {}; //http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.create var sub = plus.webview.create(subpages[i], subpages[i], subpage_style); if (i > 0) { sub.hide(); }else{ temp[subpages[i]] = "true"; mui.extend(aniShow,temp);//合并对象 } self.append(sub); } }); //当前激活选项 var activeTab = subpages[0]; //选项卡点击事件 mui('.mui-bar-tab').on('tap', 'a', function(e) { var targetTab = this.getAttribute('href'); console.log(targetTab); if (targetTab == activeTab) { return; } //更换标题 var title = document.getElementById("title"); console.log(this.querySelector('.mui-tab-label').innerHTML); title.innerHTML = this.querySelector('.mui-tab-label').innerHTML; //显示目标选项卡 //若为iOS平台或非首次显示，则直接显示 if(mui.os.ios||aniShow[targetTab]){ plus.webview.show(targetTab); }else{ //否则，使用fade-in动画，且保存变量 var temp = {}; temp[targetTab] = "true"; mui.extend(aniShow,temp); plus.webview.show(targetTab,"fade-in",300); } //隐藏当前; plus.webview.hide(activeTab); //更改当前活跃的选项卡 activeTab = targetTab; }); //自定义事件，模拟点击“首页选项卡” document.addEventListener('gohome', function() { var defaultTab = document.getElementById("defaultTab"); //模拟首页点击 mui.trigger(defaultTab, 'tap'); //切换选项卡高亮 var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active"); if (defaultTab !== current) { current.classList.remove('mui-active'); defaultTab.classList.add('mui-active'); } }); })() </script> </body> </html>