MUI-底部導航切換頁面
阿新 • • 發佈：2018-12-28
要實現儒商的效果：
1、建立4個html檔案，分別為主頁面index.html，三個子頁面a.html、b.html、c.html，如下：
2、迴圈建立子頁面
3、處理點選事件
4、退出系統後，再次進入系統，要顯示初始化狀態
5、這裡只給出index.html主頁面的程式碼， a b c 頁面沒有js邏輯，不給出原始碼了
<!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> <link href="css/mui.min.css" rel="stylesheet" /> <script src="js/mui.min.js"></script> </head> <body> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">底部導航</h1> </header> <nav class="mui-bar mui-bar-tab"> <a id="defaultTab" class="mui-tab-item mui-active" href="a.html"> <span class="mui-icon mui-icon-videocam"></span> <span class="mui-tab-label">發現</span> </a> <a class="mui-tab-item" href="b.html"> <span class="mui-icon mui-icon-chatboxes"> <span class="mui-badge">9</span> </span> <span class="mui-tab-label">訊息</span> </a> <a class="mui-tab-item" href="c.html"> <span class="mui-icon mui-icon-home"></span> <span class="mui-tab-label">我的</span> </a> </nav> <script type="text/javascript"> //mui初始化 mui.init(); // 子頁面集合 var subpages = ['a.html', 'b.html', 'c.html']; // 子頁面樣式 var subpage_style = { top: '44px', bottom: '51px', scrollIndicator:'none',//當頁面內容較多出現滾動條時,隱藏 }; // 記錄展示結果集 var aniShow = {}; //1、建立子頁面，首個選項卡頁面顯示，其它均隱藏； mui.plusReady(function() { // 獲取自身 var self = plus.webview.currentWebview(); // 迴圈建立子頁面 for (var i = 0; i < subpages.length; i++) { var temp = {}; // 建立子頁面,create(url,id,styles) 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); // console.log(JSON.stringify(aniShow)); // aniShow輸出{"a.html":"true"} } // 把子頁面追加到自身 self.append(sub); } }); //當前啟用選項,預設為第一個子頁面 var activeTab = subpages[0]; //2、選項卡點選事件 mui('.mui-bar-tab').on('tap', 'a', function(e) { // 獲取當前點選tab的href屬性 var targetTab = this.getAttribute('href'); // 當前子頁面=啟用的頁面,不操作 if (targetTab == activeTab) { return; } //1、顯示目標選項卡 //若為iOS平臺或非首次顯示(不是第一次顯示)，則直接顯示 if (mui.os.ios || aniShow[targetTab]) { console.log(aniShow[targetTab]); //輸出true plus.webview.show(targetTab); } else {//第一次點選tab才顯示 //否則，使用fade-in動畫，且儲存變數 var temp = {}; temp[targetTab] = "true"; // 合併物件 mui.extend(aniShow, temp); console.log(JSON.stringify(aniShow)); // aniShow輸出 {"a.html":"true","b.html":"true"} // aniShow輸出 {"a.html":"true","b.html":"true","c.html":"true"} plus.webview.show(targetTab, "fade-in", 300); } //2、隱藏當前; plus.webview.hide(activeTab); //3、更改當前活躍的選項卡 activeTab = targetTab; }); //3、退出系統時，預設還是載入初始化的頁面，自定義事件，模擬點選“首頁選項卡” 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>