Mui、H5+開發APP小技巧①:點選底部導航選單切換介面
阿新 • • 發佈：2018-11-01
綜述
為了使自己更好的往全棧工程師方向發展，最近在學習一個混合app開發模式。就是使用Dcloud進行開發APP。通過幾天的學習感覺這個混合app開發非常方便，我也開始總結一下開發小技巧進行記錄，方便在以後的開發中可以進行使用。
在我們平常使用的APP中，一般操作選單都是放在頁面的底部，一般為四個或是五個。這樣的底部導航選單設計使我們的APP使用起來非常方便。在H5開發中，為了使頁面利用率更高，程式碼冗餘更少，所以總結了這麼一個小技巧，使我們的APP無論開發還是使用都特別方便。檢視學習此方法需要有一定的Mui開發框架基礎。
下面即為實現程式碼（完整程式碼下載地址：點選底部導航選單切換介面
原始碼
<!--=======================================--> <!--Created by ZHIHUA·WEI. --> <!--Author: Wei ZhiHua --> <!--Date: 2018/10/24 0001 --> <!--Time: 下午 2:26 --> <!--Project: ZHIHUA·WEI --> <!--Power: APP主頁 --> <!--=======================================--> <!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" /> </head> <body> <nav class="mui-bar mui-bar-tab"> <a class="mui-tab-item mui-active" href="main.html"> <span class="mui-icon mui-icon-home"></span> <span class="mui-tab-label">首頁</span> </a> <a class="mui-tab-item" href="task.html"> <span class="mui-icon mui-icon-paperclip"></span> <span class="mui-tab-label">任務</span> </a> <a class="mui-tab-item" href="personal.html"> <span class="mui-icon mui-icon-person"></span> <span class="mui-tab-label">個人中心</span> </a> </nav> <script src="js/mui.min.js"></script> <script src="js/common.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> mui.init(); //1、定義底部導航子頁面(頁面id)，點選底部導航跳轉到子頁面風格 var subpages = ['main.html', 'task.html', 'personal.html']; var subpage_style = { top: '0px', bottom: '51px' }; //2、建立子頁面，首個選項卡頁面顯示，其它均隱藏 var view_show = {}; mui.plusReady(function() { //2.1、獲得當前主頁面資訊資料 var current = plus.webview.currentWebview(); //2.2、迴圈建立各子頁面 for(var i = 0; i < subpages.length; i++) { var temp = {}; var sub_view = plus.webview.create(subpages[i], subpages[i], subpage_style); //2.3、將首個子頁面進行顯示|其他隱藏 if(i > 0) { sub_view.hide(); } else { temp[subpages[i]] = "true"; mui.extend(view_show, temp); } //2.4、將各子頁面新增到當前主頁下 current.append(sub_view); } }); //3、當前啟用選項 var activeTab = subpages[0]; //4、底部導航選項卡點選事件 mui(".mui-bar-tab").on('tap', 'a', function() { //4.1、獲取當前點選元素的href屬性|判斷如果和當前啟用選項相同，則不進行操作|否則顯示新的頁面 var targetTab = this.getAttribute('href'); if(targetTab == activeTab) { return false; } //4.2、如果當前點選不是當前啟用的選項卡則顯示點選目標選項卡 //4.2.1、若為iOS平臺或非首次顯示，則直接顯示 if(mui.os.ios || view_show[targetTab]) { plus.webview.show(targetTab); } else { //4.2.2、否則，使用fade-in動畫，且儲存變數 var temp = {}; temp[targetTab] = "true"; mui.extend(view_show, temp); plus.webview.show(targetTab, "fade-in", 300); } //4.3、隱藏當前; plus.webview.hide(activeTab); //4.4、更改當前活躍的選項卡 activeTab = targetTab; }); //5、自定義事件，模擬點選“首頁選項卡” document.addEventListener('gohome', function() { var defaultTab = document.getElementById("defaultTab"); //5.1、模擬首頁點選 mui.trigger(defaultTab, 'tap'); //5.2、切換選項卡高亮 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>