Mui首頁底部導航欄點擊頁面切換

時間 2020-08-21
標籤 mui 首頁底部導航點擊頁面切換简体版
原文原文鏈接
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>Hello MUI</title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">

        <link rel="stylesheet" href="css/mui.min.css">
        <style>
            html,
            body {
                background-color: #efeff4;
            }
        </style>
    </head>

    <body>
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 id="title" class="mui-title">首頁</h1>
        </header>
        <nav class="mui-bar mui-bar-tab">
            <a id="defaultTab" class="mui-tab-item mui-active" href="tab-webview-subpage-about.html">
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label">首頁</span>
            </a>
            <a class="mui-tab-item" href="tab-webview-subpage-chat.html">
                <span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
                <span class="mui-tab-label">消息</span>
            </a>
            <a class="mui-tab-item" href="tab-webview-subpage-setting.html">
                <span class="mui-icon mui-icon-gear"></span>
                <span class="mui-tab-label">設置</span>
            </a>
        </nav>
        <script src="js/mui.min.js"></script>
        <script type="text/javascript" charset="utf-8">
            mui.plusReady(function(){
                var pages = ["pages/home/home.html","pages/study/study.html","pages/my/my.html"];
                var arr = document.getElementsByClassName("mui-tab-item")
                var styles = {
                    top:"45px",
                    bottom:"51px"
                }
                var pageArr = [];
                var title=document.getElementById('title');
                var slef = plus.webview.currentWebview();
                for(var i=0; i<arr.length; i++){
                    // 有幾個選項卡，須要建立幾個子頁面
                    var page = plus.webview.create(pages[i],pages[i],styles);
                    pageArr.push(page);
                    !function(i){
                        arr[i].addEventListener("tap",function(){
                            // 讓當前頁面(i)顯示，不是當前頁面隱藏
                            for(var j=0; j<pageArr.length; j++){
                                if(j!=i) pageArr[j].hide();
                                else pageArr[j].show();
                            }
                            // 設置標題
                            title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
                            /* 讓新建立的webview，追加合併到當前的窗口上。合併成一個窗口。
                             * 目的：將父子窗口合併成一個頁面，實現同開同關的效果。 避免點擊返回安監室，子頁面先關閉，而父頁面的頭部和尾部沒有關閉的BUG。
                             */
                            slef.append(pageArr[i]);
                            
                        })
                    }(i);
                }
                // 默認觸發第0個選項卡的tap事件。
                mui.trigger(arr[0],"tap");
            });
        </script>
    </body>

</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。