界面切换问题

分类：MUI

第一次切换界面时，header部分会瞬间出现标题错乱怎么处理

2017-02-14 14:01 负责人:无分享

2 个回复

giddens

贴下代码看看

钊有 (作者)

<!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;  

        }  



        #add {  

            padding-top: 4px;  

            background: black;  

        }  

        .mui-active .mui-tab-label {  

            color: #007AFF;  

        }  

        .mui-active .mui-icon {  

            color: #007AFF;  

        }  



    </style>  

</head>  



<body>  

    <header class="mui-bar mui-bar-nav" id="title">  

        <!--<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-view1.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-view2.html">  

            <span class="mui-icon mui-icon-location"></span>  

            <span class="mui-tab-label">赛事</span>  

        </a>  

        <a class="mui-tab-item" href="tab-webview-subpage-view3.html">  

            <span class="mui-icon mui-icon-chatboxes"></span>  

            <span class="mui-tab-label">圈子</span>  

        </a>  

        <a class="mui-tab-item" href="tab-webview-subpage-view4.html">  

            <span class="mui-icon mui-icon-contact"></span>  

            <span class="mui-tab-label">个人中心</span>  

        </a>  



    </nav>  



    <script src="js/mui.min.js"></script>  

    <script type="text/javascript" charset="utf-8">  

        mui.init();  

        var subpages = ['tab-webview-subpage-view1.html', 'tab-webview-subpage-view2.html', 'tab-webview-subpage-view3.html', 'tab-webview-subpage-view4.html'];  

        var subpage_style = {  

            top: '0px',  

            bottom: '51px'  

        };  

        var aniShow = {};  

        function init(){  

        var self = plus.webview.currentWebview();  

            for(var i = 0; i < 4; i++) {  

                var temp = {};  

                var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);  

                if(i > 0) {  

                    sub.hide();  

                } else {  

                    temp[subpages[i]] = "true";  

                    mui.extend(aniShow, temp);  

                }  

                self.append(sub);  

            }  



        }  



        //创建子页面，首个选项卡页面显示，其它均隐藏；  

        mui.plusReady(function() {  

        //读取本地存储，检查是否为首次启动  

        /*  var showGuide = plus.storage.getItem("lauchFlag");  

            if(showGuide){  

                //有值，说明已经显示过了，无需显示；  

                //关闭splash页面；  

                plus.navigator.closeSplashscreen();  

                plus.navigator.setFullscreen(false);*/  

                //预加载

// preload();

init();

/ }else{

//显示启动导航

mui.openWindow({

id:'guide',

url:'html/guide.html',

styles: {

popGesture:"none"

},

show:{

aniShow:'none'

},

waiting:{

autoShow:false

}

});

//延迟的原因：优先打开启动导航页面，避免资源争夺

setTimeout(function () {

init();

},200);

}/

        });  

        //当前激活选项  

        var activeTab = subpages[0];  

        var title = document.getElementById("title");  

        //选项卡点击事件  

        mui('.mui-bar-tab').on('tap', 'a', function(e) {  

            var targetTab = this.getAttribute('href');  

            if(targetTab == activeTab) {  

                return;  

            }  

            //更换标题  

            title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;  

            //显示目标选项卡  

            //若为iOS平台或非首次显示，则直接显示  

            if(mui.os.ios || aniShow[targetTab]) {  

                plus.webview.show(targetTab);  

            } else {  

                //否则，使用fade-in动画，且保存变量  

                var temp = {};  

                temp[targetTab] = "true";  

                mui.extend(aniShow, temp);  

                plus.webview.show(targetTab, "fade-in", 300);  

            }  

            //隐藏当前;  

            plus.webview.hide(activeTab);  

            //更改当前活跃的选项卡  

            activeTab = targetTab;  

        });  

        //自定义事件，模拟点击“首页选项卡”  

        document.addEventListener('gohome', function() {  

            var defaultTab = document.getElementById("defaultTab");  

            //模拟首页点击  

            mui.trigger(defaultTab, 'tap');  

            //切换选项卡高亮  

            var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");  

            if(defaultTab !== current) {  

                defaultTab.classList.add('mui-active');  

            }  

        });  

    </script>  

</body>

</html>

2017-02-16 16:19

giddens

错乱是什么意思？是不是标题先是一个，然后闪一下变成另一个？

2017-02-16 16:30
giddens

<header class="mui-bar mui-bar-nav" id="title">



<h1 id="title" class="mui-title"></h1>

这两个标签的id都是title 你下面又是根据这个id=title来赋值，能不错乱么？

2017-02-16 16:31
钊有 (作者)

回复 giddens:是的

2017-02-16 16:35
giddens

回复钊有:id改一个就好了

2017-02-16 16:40
钊有 (作者)

恩，是我大意了，但是界面有点卡动的

2017-02-16 16:41

钊有 (作者)

安装包，界面切换时有点卡动

H57F28AD4_0216081542.zip

该问题目前已经被锁定, 无法添加新回复

界面切换问题

2 个回复

公告

相关问题

界面切换问题

与内容相关的链接

2 个回复

公告

相关问题