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  感谢大佬分享。