mui底部選項卡切換頁面的兩種模式

最近接觸前端的MUI框架，涉及到底部選項卡切換的過程中有點糾結，趁着晚上總結一下：

 

MUI底部選項卡Demo展示：

http://www.dcloud.io/hellomui/

一共涉及到兩種模式：DIV模式和WebView模式

顧名思義，DIV模式是將所有子頁面的內容，分別放置到主頁不同的DIV中，當我們點擊主頁的不同選項卡時，切換不同DIV的顯示。 這種方式顯然要比加載子頁的方式快很多，但是也顯然不能承載很多布局的頁面，畢竟要在一個主頁中寫入所有子頁面的代碼，顯得不太現實。

而WebView模式則是將所有子頁面都寫入到不同的子頁面中，再通過主頁連接到一起，點擊不同的選項卡 ，加載不同的子頁面，顯然這種方式更符合我們的預期和要求。

但在實際開發實現過程中發現似乎所謂的WebView模式按鈕點擊是需要每次加載url，而DIV模式點擊時是不重新加載原url？這一點后續有待驗證

1.DIV模式

<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">底部選項卡切換(Div模式)</h1>
        </header>
        
        <nav class="mui-bar mui-bar-tab">
            <a class="mui-tab-item mui-active" href="#page1">
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label">首頁</span>
            </a>
            <a class="mui-tab-item" href="#page2">
                <span class="mui-icon mui-icon-phone"></span>
                <span class="mui-tab-label">電話</span>
            </a>
            <a class="mui-tab-item" href="#page3">
                <span class="mui-icon mui-icon-email"></span>
                <span class="mui-tab-label">郵件</span>
            </a>
            <a class="mui-tab-item" href="#page4">
                <span class="mui-icon mui-icon-gear"></span>
                <span class="mui-tab-label">設置</span>
            </a>
        </nav>
        
        
        <div class="mui-content">
            <div id="page1" class="mui-control-content mui-active">
                這是第一個頁面
            </div>
            <div id="page2" class="mui-control-content">
                這是第二個頁面
            </div>
            <div id="page3" class="mui-control-content">
                這是第三個頁面
            </div>
            <div id="page4" class="mui-control-content">
                這是第四個頁面
            </div>
        </div>

以上代碼已能實現選項卡的切換，但是針對不同詳情頁返回不同的頁簽的場景，還需要以下js：

    if(getQueryString("k")== 1){
        $("#hometab").addClass("mui-active");
        $("#home").addClass("mui-active");
    }
    else if(getQueryString("k")== 2){
        $("#worktab").addClass("mui-active");
        $("#work").addClass("mui-active");
    }
    else if(getQueryString("k")== 3){
        $("#persontab").addClass("mui-active");
        $("#person").addClass("mui-active");
    }

針對不同詳情頁設置頁面跳轉：goHome()

function goHome(k) {
    //window.location.replace(appPath + 'template/page/main/work.jsp');
    k = k || 2;
    if(k == 1){
        window.location.replace(appPath + 'template/page/main/homes.jsp?k=1');
    }    
    else if(k == 2){
        window.location.replace(appPath + 'template/page/main/homes.jsp?k=2');
    }
    else if(k == 3){
        window.location.replace(appPath + 'template/page/main/homes.jsp?k=3');
    

div模式下切換選項卡的核心內容在於將所選中的div容器的class加入mui-active屬性，

在url中加入k參數，使其通過參數k判斷要跳轉至哪一個選項卡。

2.WebView模式

使用WebView模式的選項卡切換，首先需要創建多個子頁面的HTML文件，而主頁中，只需要頭部和尾部即可，其他功能交給JS操作：

<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">底部選項卡切換(Div模式)</h1>
        </header>
        
        <nav class="mui-bar mui-bar-tab">
            <a class="mui-tab-item mui-active" href="#page1">
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label">首頁</span>
            </a>
            <a class="mui-tab-item" href="#page2">
                <span class="mui-icon mui-icon-phone"></span>
                <span class="mui-tab-label">電話</span>
            </a>
            <a class="mui-tab-item" href="#page3">
                <span class="mui-icon mui-icon-email"></span>
                <span class="mui-tab-label">郵件</span>
            </a>
            <a class="mui-tab-item" href="#page4">
                <span class="mui-icon mui-icon-gear"></span>
                <span class="mui-tab-label">設置</span>
            </a>
        </nav>
        
        
        <div class="mui-content">
            <div id="page1" class="mui-control-content mui-active">
                這是第一個頁面
            </div>
            <div id="page2" class="mui-control-content">
                這是第二個頁面
            </div>
            <div id="page3" class="mui-control-content">
                這是第三個頁面
            </div>
            <div id="page4" class="mui-control-content">
                這是第四個頁面
            </div>
        </div>

JS代碼：

//設置底部選項卡頁面跳轉,元素不選mui('body') 避免與注銷按鈕沖突
            mui('.mui-bar').on('tap','a',function(){
                  window.top.location.href=this.href;
           });
        
            mui.init();
            //創建子頁面
            var subpages = ['home.jsp','work.jsp','person.jsp'];
            var subpage_style = {
                top: '0px',
                bottom: '50px',
                scrollIndicator: "none" ,// 當你的界面的內容足夠多的時候，會出現滾動條，這個是隱藏滾動條
            };
                         
            //創建子頁面，首個選項卡頁面顯示，其它均隱藏；
            mui.plusReady(function(){
                //獲得當前頁面
                var self = plus.webview.currentWebview();
                //循環創建子頁面
                for(var i=0;i<subpages.length;i++){
                    var sub = plus.webview.create(subpages[i],subpages[i],subpage_style);
                    var sub = plus.webview.create(
                        'home.jsp',
                        'home.jsp',{
                top: '0px',
                bottom: '50px',
                scrollIndicator: "none" ,// 當你的界面的內容足夠多的時候，會出現滾動條，這個是隱藏滾動條
            });
                    if(i>0){
                        sub.hide();
                    }
                    self.append(sub);
                }
            });
                         
                         
            //當前激活選項卡
            var activeTab = subpages[0];
                         
            //選項卡點擊事件
            mui('.mui-bar-tab').on('tap', 'a', function(e) {
                var targetTab = this.getAttribute('href');
                if (targetTab == activeTab) {
                        return;
                }
                //顯示目標選項卡
                plus.webview.show(targetTab);
                //隱藏當前;
                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');
                }
            });

注:html部分的代碼是網上粘貼得來（實際項目的頁面過於冗長又懶得手打），所以部分jsp頁面名稱對不上，讀者自行修改，但實現的關鍵在於js部分。

 

部分內容來自https://www.cnblogs.com/jerehedu/p/9167369.html  感謝大佬分享。