mui 點選底部選單，顯示不同的頁面
阿新 • • 發佈：2018-12-17
效果：
原始碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <script src="js/mui.min.js"></script> <link href="css/mui.min.css" rel="stylesheet" /> <link rel="stylesheet" href="css/iconfont.css"><!-- 引入支付寶圖示檔案--> <link rel="stylesheet" href="css/freestyle.css" /><!-- 自定義樣式檔案--> <script type="text/javascript" charset="utf-8"> mui.init(); </script> </head> <body > <nav class="mui-bar mui-bar-tab footer"> <!-- mui選單欄--> <a class="mui-tab-item mui-active" href="home.html"> <span class="mui-icon iconfont icon-qianbaopengyou"></span> <!--支付寶圖示--> <span class="mui-tab-label">首頁</span> </a> <a class="mui-tab-item " href="wealth.html"> <span class="mui-icon iconfont icon-caifua"></span> <span class="mui-tab-label">財富</span> </a> <a class="mui-tab-item " href="praise.html"> <span class="mui-icon iconfont icon-gouwu"></span> <span class="mui-tab-label">口碑</span> </a> <a class="mui-tab-item" href="friends.html"> <span class="mui-icon iconfont icon-shejiao"></span> <span class="mui-tab-label">朋友</span> </a> <a class="mui-tab-item " href="mine.html"> <span class="mui-icon iconfont icon-changbei"></span> <span class="mui-tab-label">我的</span> </a> </nav> </body> <script> <!--頁面陣列--> var subpages = ["home.html", "wealth.html", "praise.html", "friends.html", "mine.html"]; var index = 0; mui.plusReady(function() { var currentwebview = plus.webview.currentWebview(); <!--得到當前的webview--> for(var i = 0; i < subpages.length; i++) { <!--建立子webview,距離底部51px，讓底部的選單欄可以顯示出來--> var sub = plus.webview.create(subpages[i], subpages[i], { top: "0px", bottom: "51px" }); if(i > 0) { sub.hide(); <!--如果不是第一個頁面，也就是home.html,就讓它隱藏--> } currentwebview.append(sub);<!--當前webview新增子webview--> } var activeTab = subpages[0]; mui(".footer").on("tap", "a", function() { <!--點選底部選單欄中的某個超連結，觸發tap事件--> var targetPage = this.getAttribute("href"); <!--得到超連結的值--> activeTab = mui(".footer .mui-active")[0].getAttribute("href"); <!--得到當前活動的超連結的值--> if(targetPage == activeTab) {<!--如果目標和當前的活動的超連結的值相同，直接返回，不走下面程式碼--> return; } plus.webview.hide(activeTab);<!---如果不是同一個超連結，那就顯示點選的webview，隱藏活動的webview-> plus.webview.show(targetPage); }) }) </script> </html>