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

【报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

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