1. 程式人生 > >MUI底部導航切換子頁面

MUI底部導航切換子頁面

reat document pen enter 標題 htm ttr active fun

1.登陸頁面進入之後,進入到main頁面,main頁面只有一個底部導航,然後引入子頁面進行渲染。

    <nav class="mui-bar mui-bar-tab" id="tabbar">
            <a class="mui-tab-item mui-active" href="html/applyy.html" id="apply">
                <span class="mui-icon apply"></span>
                <span class="mui-tab-label "
>申請</span> </a> <a class="mui-tab-item" href="html/getmedicine.html" id="getmedicine"> <span class="mui-icon getmedicine"></span> <span class="mui-tab-label ">領藥</span> </a> <
a class="mui-tab-item" href="html/me.html" id="me"> <span class="mui-icon me"></span> <span class="mui-tab-label">我的</span> </a> </nav>

2.css部分,點擊高亮切換圖片。

#mui-bar {
                height: 1rem!important;
                border-top
: 0.8rem; } .mui-tab-item { text-align: center; } .mui-icon { margin-left: 0.1rem; width: 0.5rem!important; height: 0.5rem!important; } .mui-tab-label { color: #999999; font-size:13px!important; } .mui-active .mui-tab-label { color: #00cec5; font-size:13px!important; } .apply { background: url(images/index/apply.png)0 0.02rem no-repeat; background-size: 0.4rem 0.45rem; } .mui-active .apply { background: url(images/index/applyactive.png)0 0.02rem no-repeat; background-size: 0.4rem 0.45rem; } .getmedicine { background: url(images/index/get.png)0 0.02rem no-repeat; background-size: 0.4rem 0.45rem; } .mui-active .getmedicine { background: url(images/index/getactive.png)0 0.02rem no-repeat; background-size: 0.4rem 0.45rem; } .me { background: url(images/index/me.png)0 0.02rem no-repeat; background-size: 0.4rem 0.45rem; } .mui-active .me { background: url(images/index/meactive.png)0 0.02rem no-repeat; background-size: 0.4rem 0.45rem; }

3,js部分

// 初始化mui.init()寫在這裏   
            mui.init();
            //設置默認打開首頁顯示的子頁序號;
            var Index = 0;
            //把子頁的路徑寫在數組裏面
            var subpages = [‘html/applyy.html‘, ‘html/getmedicine.html‘, ‘html/me.html‘];

            //把子頁的路徑寫在數組裏面
            //所有的plus-*方法寫在mui.plusReady中或者後面。
            mui.plusReady(function() {
                //獲取當前頁面所屬的Webview窗口對象
                var self = plus.webview.currentWebview();
                for(var i = 0; i < 3; i++) {
                    //創建webview子頁
                    var sub = plus.webview.create(
                        subpages[i], //子頁url
                        subpages[i], //子頁id
                        {
                            top: ‘0‘, //設置距離頂部的距離
                            bottom: ‘50px‘ //設置距離底部的距離
                        }
                    );
                    //如不是我們設置的默認的子頁則隱藏,否則添加到窗口中
                    if(i != Index) {
                        sub.hide();
                    }
                    //將webview對象填充到窗口
                    self.append(sub);
                }
            });

            //當前激活選項
            var activeTab = subpages[Index],
                title = document.querySelector(".mui-title");
            //選項卡點擊事件
            mui(‘.mui-bar-tab‘).on(‘tap‘, ‘a‘, function(e) {
                //獲取目標子頁的id
                var targetTab = this.getAttribute(‘href‘);
                if(targetTab == activeTab) {
                    return;
                }
                //更換標題
                // h1.innerHTML = this.querySelector(‘.mui-tab-label‘).innerHTML;
                //顯示目標選項卡
                plus.webview.show(targetTab);
                //隱藏當前選項卡
                plus.webview.hide(activeTab);
                //更改當前活躍的選項卡
                activeTab = targetTab;
            });
            
            
            //自定義事件,模擬點擊“首頁選項卡”
            //申請頁面
            window.addEventListener(‘apply‘, function() {
                 location.reload();                
                var apply= document.getElementById("apply");
                //模擬首頁點擊
                mui.trigger(apply, ‘tap‘);
                //切換選項卡高亮
                var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
                if(apply!== current) {
                    current.classList.remove(‘mui-active‘);
                    apply.classList.add(‘mui-active‘);
                }
                
            });
            
    
            //領藥頁面
            document.addEventListener(‘getmedicine‘, function() {
                var getmedicine = document.getElementById("getmedicine");
                //模擬首頁點擊
                mui.trigger(getmedicine, ‘tap‘);
                //切換選項卡高亮
                var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
                if(getmedicine !== current) {
                    current.classList.remove(‘mui-active‘);
                    getmedicine.classList.add(‘mui-active‘);
                }
            
            });
            
            //我的頁面
            document.addEventListener(‘me‘, function() {
                 location.reload();        
                var me= document.getElementById("me");
                //模擬首頁點擊
                mui.trigger(me, ‘tap‘);
                //切換選項卡高亮
                var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
                if(me !== current) {
                    current.classList.remove(‘mui-active‘);
                    me.classList.add(‘mui-active‘);
                }
            });

4.子頁面需要調用的。

//領藥結束跳轉頁面
                    $("#end").click(function(){
                        mui.fire(plus.webview.currentWebview().opener(),"apply");
                    })

MUI底部導航切換子頁面