mui 之 窗口切换

说明

为了提高切换窗口的效率，所以会有一个 预加载的操作。

窗口切换使用到了 H5的 plus Api，所以一般浏览器不会有效果，最好真机测试

官方文档：https://dev.dcloud.net.cn/mui/window/#window

窗口切换

以底部导航栏作为切换按钮

<nav class="mui-bar mui-bar-tab">
    <a id="btn-home" class="mui-tab-item mui-active">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首页</span>
    </a>
    <a id="btn-phone" class="mui-tab-item">
        <span class="mui-icon mui-icon-phone"></span>
        <span class="mui-tab-label">电话</span>
    </a>
    <a id="btn-email" class="mui-tab-item">
        <span class="mui-icon mui-icon-email"></span>
        <span class="mui-tab-label">邮件</span>
    </a>
    <a id="btn-gear" class="mui-tab-item">
        <span class="mui-icon mui-icon-gear"></span>
        <span class="mui-tab-label">设置</span>
    </a>
</nav>

创建单独页面

<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>l

设置首页加载，其他页面 预加载

<script type="text/javascript">
    mui.init({
        // 主页面
        subpages:[
            {
            url:"views/home.html",
            id:"home.html",
            styles:{
                top: 0,
                // 高度是为了留够 底部导航栏的位置
                bottom: "45px"
                }
            }
        ],
        // 预加载页面
        preloadPages:[
            {url:"views/phone.html",id:"phone.html",styles:{top: 0,bottom: "45px"}},
            {url:"views/email.html",id:"email.html",styles:{top: 0,bottom: "45px"}},
            {url:"views/gear.html",id:"gear.html",styles:{top: 0,bottom: "45px"}},
        ],
    });
</script>

这时，只能加载首页，并不能切换

切换窗口事件

<script>
    // 首页事件跟其他的不一样
    document.getElementById("btn-home").addEventListener("tap", function() {
        plus.webview.getLaunchWebview().show();
    });

    // 展示电话页
    document.getElementById("btn-phone").addEventListener("tap",function(){
        // 通过 id 获取到预加载的页面
        var view = plus.webview.getWebviewById("phone.html");
        plus.webview.show(view);
    })

    // 展示邮箱页
    document.getElementById("btn-email").addEventListener("tap",function(){
        // 通过 id 获取到预加载的页面
        var view = plus.webview.getWebviewById("email.html");
        plus.webview.show(view);
    })

    // 展示设置页
    document.getElementById("btn-gear").addEventListener("tap",function(){
        // 通过 id 获取到预加载的页面
        var view = plus.webview.getWebviewById("gear.html");
        plus.webview.show(view);
    })
</script>