详细问题描述
由列表页进入外部链接页,再返回好像他会重新渲染,加了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