渐行渐远
渐行渐远
  • 发布:2016-06-29 15:23
  • 更新:2017-12-22 17:20
  • 阅读:3338

【报Bug】由列表页进入外部链接页,再返回好像他会重新渲染,加了wv.setStyle({'render':'always','bounce':'all'});也没用

分类:HTML5+

详细问题描述
由列表页进入外部链接页,再返回好像他会重新渲染,加了wv.setStyle({'render':'always','bounce':'all'});也没用

重现步骤
列表页内容

<!doctype html>  
<html>  

    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <link href="css/mui.min.css" rel="stylesheet" />  
        <link rel="stylesheet" type="text/css" href="css/common.css"/>  
    </head>  

    <body>  
        <div id="refreshContainer" class="mui-content mui-scroll-wrapper">  
            <div class="mui-scroll">  
                <!--数据列表-->  
                <ul id="list" class="mui-table-view mui-table-view-chevron">  
                    <div class="loading">  
                        <div class="load"></div>  
                        <p class="loading_p" id="loading_p">努力加载中.</p>  
                    </div>  
                </ul>  

                <script id="test" type="text/html">  
                    {{each result.list as value i}}  
                        <li class="mui-table-view-cell mui-media" data-url="{{value.url}}">  
                            <img class="mui-media-object mui-pull-left" src="{{value.firstImg}}">  
                            <div class="mui-media-body">  
                                <h6 class="mui-ellipsis">{{value.title}}</h6>  
                                <p class="mui-ellipsis"><span class="source">来源:</span>{{value.source}}</p>  
                            </div>  
                        </li>  
                    {{/each}}  
                </script>  
            </div>  
        </div>  
    </body>  
    <script src="js/mui.min.js"></script>  
    <script src="js/template.js" type="text/javascript" charset="utf-8"></script>  
    <script src="js/common.js" type="text/javascript" charset="utf-8"></script>  
    <script type="text/javascript">  
        mui.init({  
            pullRefresh : {  
                container:"#refreshContainer",//下拉刷新容器标识,querySelector能定位的css选择器均可,比如:id、.class等  
                down : {  
                    contentdown : "下拉可以刷新",//可选,在下拉可刷新状态时,下拉刷新控件上显示的标题内容  
                    contentover : "释放立即刷新",//可选,在释放可刷新状态时,下拉刷新控件上显示的标题内容  
                    contentrefresh : "正在刷新...",//可选,正在刷新状态时,下拉刷新控件上显示的标题内容  
                    callback :pulldown //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;  
                }  
            }  
        });  

        //下拉函数  
        function pulldown() {  
            var pno = 1;  
            mui.ajax({  
                url: "http://0475qf.com/app/html/juhe.php?pno="+pno,  
                dataType: 'json',  
                success: function(data) {  
                    setTimeout(function() {  
                        var html = template('test', data);  
                        document.getElementById('list').innerHTML = html;  
                    }, 500);  

                    mui('#refreshContainer').pullRefresh().endPulldownToRefresh();  
                }  
            })  
        }  
        pulldown();  
        mui.plusReady(function() {  
            setTimeout(function() {  
                plus.navigator.closeSplashscreen();  
                plus.navigator.setStatusBarBackground('#FFFFFF');  
                if(plus.navigator.isImmersedStatusbar()){  
                    plus.navigator.setStatusBarStyle('UIStatusBarStyleBlackOpaque');  
                }  
            },500);  
            var wv=plus.webview.currentWebview();  
            wv.setStyle({scrollIndicator:'none'});  
        });  

        mui("#list").on('tap', 'li', function() {  
            var data_url = this.getAttribute('data-url');  
            var nwaiting = plus.nativeUI.showWaiting();//显示原生等待框  
            webviewShow = plus.webview.create("wei.html", 'wei', {}, {data_url: data_url});//后台创建webview并打开show.html  
            webviewShow.addEventListener("loaded", function() { //注册新webview的载入完成事件  
                nwaiting.close(); //新webview的载入完毕后关闭等待框  
                webviewShow.show("slide-in-right",150); //把新webview窗体显示出来,显示动画效果为速度150毫秒的右侧移入动画  
            }, false);  

//          mui.openWindow({  
//              id: 'wei',  
//              url: 'wei.html',  
//              styles: {  
//                  top: '0px',  
//                  bottom: '0px',  
//                  hardwareAccelerated:true,  
//                  scrollIndicator: 'none',  
//                  scalable:false,  
//                  popGesture: 'none'  
//              },  
//              show: {  
//                  duration: '500',  
//                  aniShow: 'slide-in-right'  
//              },  
//              extras: {  
//                  data_url: data_url  
//              }  
//          })  
        });  
    </script>  
</html>

列表页跳转后的内容页

<!DOCTYPE HTML>  
<html>  
    <head>  
        <meta charset="utf-8"/>  
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>  
        <meta name="HandheldFriendly" content="true"/>  
        <meta name="MobileOptimized" content="320"/>  
        <title>Hello H5+</title>  
        <script type="text/javascript" src="js/mui.min.js"></script>  
        <script src="js/common.js" type="text/javascript" charset="utf-8"></script>  
        <script type="text/javascript" charset="utf-8">  
var ws=null,embed=null;  
// 扩展API加载完毕,现在可以正常调用扩展API   
function plusReady(){  
    ws=plus.webview.currentWebview();  
    ws.addEventListener('show',createEmbed,false);  
    ws.setStyle({scrollIndicator:'none'});  
}  
// 判断扩展API是否准备,否则监听"plusready"事件  
if(window.plus){  
    plusReady();  
}else{  
    document.addEventListener("plusready",plusReady,false);  
}  
// 创建子Webview  
function createEmbed(){  
    var data_url = plus.webview.currentWebview().data_url;  
    var topoffset='69px';  

    plus.nativeUI.showWaiting('',{style:'black',modal:false,background:'rgba(0,0,0,0)'});  
    embed=plus.webview.create(data_url,'embed',{top:topoffset,bottom:'0px',position:'dock',dock:'bottom',bounce:'vertical'});  
    ws.append(embed);  
    embed.addEventListener('loaded',function(){  
        plus.nativeUI.closeWaiting();  
    },false);  
    embed.addEventListener('loading',function(){  
        plus.nativeUI.showWaiting('',{style:'black',modal:false,background:'rgba(0,0,0,0)'});  
    },false);  
}  
// 页面加载后自动打开  
document.addEventListener("DOMContentLoaded",function(){  
    if(embed){  
        openUrl();  
    }else{  
        auto=true;  
    }  
},false);  
// 页面跳转完成事件  
function onBrowserLoading(){  
    document.getElementById("url").value=embed.getURL();  
}  
        </script>  
        <link rel="stylesheet" href="css/mui.min.css" type="text/css" charset="utf-8"/>  
        <link rel="stylesheet" type="text/css" href="css/common.css"/>  
    </head>  
    <body>  
        <header class="mui-bar mui-bar-nav">  
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
            <h1 class="mui-title">标题</h1>  
        </header>  
    </body>  
    <!--<script type="text/javascript" src="js/immersed.js" ></script>-->  
</html>

从列表页点击进入内容页再返回时,会发现列表页有白屏一下,或者图片闪一下的情况出现,应该是又重新渲染了,在其他地方也会有莫名其妙的时候发生这种情况
希望能够解决这个问题,太影响体验了

运行环境
[系统版本]
windows 7 64位 手机:OPPO R7S
[浏览器版本]
QQ浏览器最新版本
[IDE版本]
最新版
[mui版本]
最新版

附件
安装包已上传附件
代码不知道为什么总是上传失败
联系方式
[QQ] 326200937
[电话] 15714750293

2016-06-29 15:23 负责人:无 分享
已邀请:
渐行渐远

渐行渐远 (作者)

来个人回复解决一下,是bug还是我写错了

BoredApe

BoredApe - 有问题就会有答案。

测试未发现有白屏现象,你是使用什么设备测得?

  • 渐行渐远 (作者)

    OPPO R7S,就是返回的时候上一个页面不是完全静止的,图片什么的会闪一下 ,界面看着好像重新渲染了一样

    2016-06-30 11:29

  • 渐行渐远 (作者)

    如果下一个页面跳转的不是外部链接这种的,再返回的时候会特别流畅,就像两个完全静止的页面在平移,但是这个返回的时候会明显的闪一下

    2016-06-30 11:41

小明子

小明子

访问外部资源,试试最新的预加载 plus.webview.prefetchURL

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