Angelbeats
Angelbeats
  • 发布:2016-11-23 14:45
  • 更新:2016-11-23 16:41
  • 阅读:1993

A页面跳转B页面(主子构成),背景颜色由:灰—白—灰变化过程,怎么解决?谢谢解答

分类:HTML5+

A 页面 打开 B页面方式:

	  mui.openWindow({   
		id: href,  
		url: href,   
		preload:false,   
		extras: {       
                       //三个动态参数  
			userinfo : ws.userinfo,  
			itfName: itfName,  
			type : this.getAttribute('type')  
		}  
	});

B页面(主子页面构成,动态的子页面 C):

<!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/header.css"/>  
		<script src="js/mui.min.js"></script>  
		<style type="text/css">  
			#search{  
				display: none;  
			}  
		</style>  
	</head>  
  
	<body>  
		<header class="mui-bar mui-bar-nav">  
		   <a class="mui-icon mui-icon-left-nav mui-pull-left" onclick="reGetData();"></a>  
		   <h1 class="mui-title" id="title"></h1>  
		   <span id="search" class="mui-icon mui-icon-search mui-pull-right" style="color: white;" onclick="openCollapse();"></span>  
		</header>  
  
		<script type="text/javascript">  
			var ws = null;  
			var sub = "work.html";  
			  
			mui.init();  
			  
	      	mui.plusReady(function () {  
	      	    ws=plus.webview.currentWebview();  
	      	     
	      	    if(ws.type == "db") {  
	      	    	document.getElementById("title").innerHTML = "待办公文";  
	      	    }else if(ws.type == "dy") {  
	      	    	document.getElementById("title").innerHTML = "待阅公文";  
	      	    }else if(ws.type == "duban") {  
	      	    	document.getElementById("title").innerHTML = "督办公文";  
	      	    }else if(ws.type == "tz") {  
	      	    	document.getElementById("title").innerHTML = "通知公告";  
	      	    }else if(ws.type == "yb") {  
	      	    	document.getElementById("title").innerHTML = "已办公文";  
	      	    	document.getElementById("search").style.display = "block";  
	      	    	sub = "work_ybyy.html";  
	      	    }else {  
	      	    	document.getElementById("title").innerHTML = "已阅公文";  
	      	    	document.getElementById("search").style.display = "block";  
	      	    	sub = "work_ybyy.html";  
	      	    }  
	      	      
	      	    getData();  
	      	});	  
	      	  
	      	function getData() {  
	      		var subPages = null;  
	      		if(subPages == null) {  
	      			subPages = plus.webview.create(sub, sub, {top:'45px', bottom: '0px'}, {type: ws.type, itfName: ws.itfName})  
	      		}  
	      		ws.append(subPages);  
	      	}  
	      	  
	      	function openCollapse() {  
	      		plus.webview.getWebviewById("work_ybyy.html").evalJS("openCollapse()");  
	      	}  
	      	  
			//重写返回  
			function reGetData() {    
				plus.webview.getWebviewById('main.html').evalJS("getData()");    
			 	mui.back();   
			}			  
		</script>  
	</body>  
  
</html>

问题1:页面跳转的背景颜色有白色变化(二次渲染)怎么产生的?所有页面没有设置 body的背景颜色,默认都灰色。
看了社区其他答案是动画转场问题,但我没有设置,全部默认由右侧划入。

问题2:A页面传的是动态参数,主页面B 如果用 subpages主子方式 怎么传 三个动态参数到 子页面 C?自定义事件? 所以上面我用了 plus.webview.create方式创建主子页面方便传参。而且我的子页面是动态的,请问用subpage怎么构成,可以达到这种需求? 因为要用到下拉刷新和上拉加载,只能用主子页面构成。
以上有什么解决方案吗,谢谢。

2016-11-23 14:45 负责人:无 分享
已邀请:

最佳回复

Trust

Trust - 少说废话

问题1:
mui.css里面默认设置body,html的背景颜色为灰色,如果需要修改,可以用css覆盖修改。
动画设置,打开新webview的动画,可以自己调整,参考相关的API

问题2:
依据你的描述,传参的形式可以理解为:A->B->C,也就是C需要接受A传递的参数。
按照例子所示,B里面可以拿到A中extras传递的参数。同理,B也可以以同样的道理,传递给C。
采用init中配置子页面的形式,可以将init放在plusready后执行,这样就可以先读取参数,再进行传递。

// B页面  
mui.plusReady(function(){  
    var self = plus.webview.currentWebview(); //当前webview对象  
    var param = self.param; //A传递过来的额外的参数  
    mui.init({  
        subpages:[{  
            url: 'xxx',  
            id: 'id',  
            extras:{  
                param: param  
            }              
        }]  
    });  
});

关于页面跳转的loading以及展示的时机,可以尝试这样做。
A页面,打开一个waiting。B页面(如果是父子页面,则是子页面C),监听当前webview的loaded事件,然后show当前的webview。
相关的API,参考plus.webview部分

  • Angelbeats (作者)

    问题2我懂了,我以为初始化要先执行,没想到可以在plus中执行,谢谢。 不过问题1我的意思不是说要改背景颜色和转场动画。需求全部默认就行了,但是全部默认的情况下这种打开方式中间有白色的变化过程,这个白色不是页面控制的背景颜色,也就是有二次渲染的问题。但是我什么都没设置


    2016-11-23 16:38

  • Trust

    回复 Angelbeats:建议使用loading等待的方式,当webview的loaded事件执行后,再展示。具体看我补充的内容。


    2016-11-23 16:40

  • Angelbeats (作者)

    回复 Trust:问题解决了,还是用上我上面的代码,只要在 create创建子页面后,加以下代码,也就是你说的先监听子页面渲染后再 append到主页面就行了。 plus.webview.getWebviewById(sub).addEventListener("loaded", function() {

    ws.append(subPages);

    }) 这种创建方式和 init 创建主子页面选哪种方案好?init封装了就省事点吧,不过上面的代码运行也没什么问题。


    2016-11-23 16:55

  • Trust

    回复 Angelbeats:封装是为了更方便,如果你觉得封装的满足不了需求,就自己按照自己的业务处理就好了。


    2016-11-23 17:10

  • Angelbeats (作者)

    回复 Trust:好的,谢谢指点。


    2016-11-23 17:11

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