效果图
<!doctype html> <html> <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 href="css/mui.min.css" rel="stylesheet" /> </head> <body id="body"> <!-- 主页面标题 --> <header class="mui-bar mui-bar-nav"> <a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left" href="#offCanvasSide"></a> <h1 class="mui-title">标题</h1> </header> <!-- 主页面内容容器 --> <div class="mui-content"> </div> <!-- 底部导航 --> <nav class="mui-bar mui-bar-tab"> <a class="mui-tab-item mui-active" id="tab0"> <span class="mui-icon mui-icon-home"></span> <span class="mui-tab-label">首页</span> </a> <a class="mui-tab-item" id="tab1"> <span class="mui-icon mui-icon-phone"></span> <span class="mui-tab-label">电话</span> </a> <a class="mui-tab-item" id="tab2"> <span class="mui-icon mui-icon-email"></span> <span class="mui-tab-label">邮件</span> </a> <a class="mui-tab-item" id="tab3"> <span class="mui-icon mui-icon-gear"></span> <span class="mui-tab-label">设置</span> </a> </nav> <script src="js/mui.min.js"></script> <script type="text/javascript"> mui.init(); var subPageUrl = ['tab1.html','tab2.html','tab3.html','tab4.html'];//子页面的路径 var subWebview = {};//子页面的webview var currentTabIndex = 0;//当前tab的下标 mui.plusReady(function(){ //预加载tab页面，并将页面添加到主页面 var main = plus.webview.currentWebview();//当前页面是主页面，直接取得 for(i in subPageUrl){ //alert(subPageUrl[i]) subWebview[i] = mui.preload({//预加载每个子页面，生成的webview加入视图集合 id: subPageUrl[i], url: subPageUrl[i], styles: {//设置子页面样式 top: '44px',//距离顶部44px bottom: '51px',//距离底部51px left: '0px', bounce: 'vertical', bounceBackground: '#DCDCDC' }, waiting: { autoShow: false //不显示 } }) subWebview[i].hide();//隐藏每个子页面 main.append(subWebview[i]);//将子页面添加到主页面中 } subWebview[currentTabIndex].show(); //监听tab切换 mui(".mui-bar-tab").on("tap","a",function(){ var id = mui(this)[0].getAttribute("id"); var tabIndex = id.replace("tab",""); if(currentTabIndex == tabIndex){ return; }else{ currentTabIndex = tabIndex; var tabUrl = subPageUrl[tabIndex];//取得webview的路径，也是id subWebview[currentTabIndex].hide();//隐藏当前的页面 subWebview[tabIndex].show();//显示需要显示的页面 } }) }) </script> </body> </html>