底部导航进入子页面再返回时闪屏

分类：HTML5+

闪屏

主界面有底部tab导航切换三个webview,点击其中一个webview进入其子页面，再返回主界面，点击其它两个webview时感觉出现重绘闪屏，体验不好。如果光是在主界面来回切换webview不会闪屏，只有在第一次进入时会闪。这个问题怎么破？

<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/iconfont.css" />  
    <link rel="stylesheet" href="css/mui.min.css" />  
</head>  
<style>  
    .mui-bar-tab .mui-tab-item {  
        color: #999;  
    }  

    .mui-bar-tab .mui-tab-item.mui-active {  
        color: #059BDA;  
    }  
</style>  

<body>  
    <nav class="mui-bar mui-bar-tab" style="background: #f1f1f1;">  
        <a id="defaultTab" class="mui-tab-item mui-active" href="src/query.html">  
            <span class="mui-icon iconfont icon-chaxun"></span>  
            <span class="mui-tab-label">查询</span>  
        </a>  
        <a class="mui-tab-item" href="src/audit.html">  
            <span class="mui-icon iconfont icon-icongroup04">  
                <span class="mui-badge"></span>  

            </span>  
            <span class="mui-tab-label">审核</span>  
        </a>  
        <a class="mui-tab-item" href="src/mine.html">  
            <span class="mui-icon iconfont icon-mine"></span>  
            <span class="mui-tab-label">我的</span>  
        </a>  
    </nav>  
</body>  
<script type="text/javascript" src="js/mui.min.js"></script>  
<script type="text/javascript" src="js/common.js"></script>  
<script type="text/javascript" src="js/update.js" ></script>  
<script type="text/javascript" charset="utf-8">  
    //mui初始化  
    mui.init();  
    common.bindQuit();  
    var mask = mui.createMask();  

    var docEl = document.documentElement,  
        oSize = docEl.clientWidth / 4;  

    if(oSize > 100) {  
        oSize = 100; //  限制rem值   640 / 6.4 =100  
    }  
    var subpages = ['src/query.html', 'src/audit.html', 'src/mine.html'];  
    var subpage_style = {  
        top: '0px', //如果要留title,则需要设置45px 留出位置  
        bottom: '51px',  
    };  
    var subExtras = {  
        oSize: oSize  
    }  

    var aniShow = {};  

    //创建子页面，首个选项卡页面显示，其它均隐藏；  
    mui.plusReady(function() {  
        var self = plus.webview.currentWebview();  
        for(var i = 0; i < 3; i++) {  
            var temp = {};  
            var sub = plus.webview.create(subpages[i], subpages[i], subpage_style, subExtras);  
            if(i > 0) {  
                sub.hide();  
            } else {  
                temp[subpages[i]] = "true";  
                mui.extend(aniShow, temp);  
            }  
            self.append(sub);  
        }  
    });  
    //当前激活选项  
    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) {  
            current.classList.remove('mui-active');  
            defaultTab.classList.add('mui-active');  
        }  
    });  

    function getTimeStamp() {  
        var key = Date.parse(new Date()); + "";  
        var random = (Math.random() + "").replace(".", "").substring(1, 7) +  
            "";  
        return key + random;  
    }  
</script>

</html>

2017-03-21 23:53 负责人:无分享