mui多页面切换实现

方法一：

将所有页面写在一个页面中，例如：首页是 index.html,将其他子页面内容放入mui-content 中。

但是此处有一个关键点：必须 设置 tab 卡中href="页面 id 属性值" 真实内容必须放在mui-control-content 并且设置其 id 属性下。(原理锚点)

代码演示：

<!--头部代码-->
<!--tab 卡代码-->
<a class="mui-tab-item mui-active" href="#sub1">
            <span class="mui-icon mui-icon-chatbubble"></span>
            <span class="mui-tab-label">微信</span>
        </a>
<div class="mui-content">
    <!--页面 1-->
    <div class="mui-control-content" id="sub1">
        <!--此处放页面代码-->
        <ul class="mui-table-view"></ul>
    </div>
    <!--页面 2-->
    <div class="mui-control-content" id="sub2">
        <!--此处放页面代码-->
        <ul class="mui-table-view"></ul>
    </div>
</div>

方法 2

将每个页面内容用 html 页存放，用 js 将每个页面镶嵌到主页面中。先将所有页面隐藏再显示出主页面。

记住此处要把 tab 中 href 地址改为你的子页得地址，删除子页得mui-control-content样式，不删除不能显示。

js 代码

(function($, doc){
    var subPage = ["sub1.html","sub2.html","sub3.html","sub4.html"];

    // 页面打开样式
    var subStyle = {
        top:"44px",
        bottom:"50px"
    };

    $.plusReady(function(){
                // 获取当前窗体
        var self = plus.webview.currentWebview();

        for(var i = 0;i < subPage.length; i++){
            var sub = plus.webview.create(subPage[i],subPage[i],subStyle);
            sub.hide();
            self.append(sub);
        }

        plus.webview.show(subPage[0]);

        $('.mui-bar-tab').on('tap','a', function(e){
            var tabPage = this.getAttribute("href");
            plus.webview.show(tabPage,"fade-in", 100);
        });
    })

})(mui,document);