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底部導航切換子頁面