A页面跳转B页面（主子构成），背景颜色由：灰—白—灰变化过程，怎么解决？谢谢解答

分类：HTML5+

传参转场 Webview

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 负责人:无分享

1 个回复

最佳回复

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

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

A页面跳转B页面（主子构成），背景颜色由：灰—白—灰变化过程，怎么解决？谢谢解答

与内容相关的链接

1 个回复

公告

相关问题