MUI底部导航切换子页面

Posted 2021-01-22 zxcc

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");
                    })