shwanYu
shwanYu
  • 发布:2015-12-10 18:37
  • 更新:2015-12-11 09:34
  • 阅读:1809

webview 在android下无法打开 ?是否为一个bug?请帮忙看下!谢谢!

分类:HTML5+

我按照Hbuilder里面的mui演示项目的首页,做了一个抽屉(drawer)效果,顶部导航里面,一左一右两按钮,点击左边按钮,动画(从左到右)滑出一个预先加载好的页面(按照演示首页的做法),点击右边按钮也一样滑出(从右到左)一个预先加载好的页面,我的实现方式就是完全按照演示首页的做法来(为了可读性考虑,随便改到几个变量名字),然后问题出现了:

  1. ios平台上真机调试,左右两个webview都可以顺利滑出,很流畅,没问题!
  2. android 平台上(已经试过 nexus 5 , samsung s6等三个机型),如果先点击右边的图标打开预加载好的webview, 顺利滑出;但是不管之后还是之前,如果打开过左边的webview(drawer 效果)之后,再点击右边图标想打开右边的webview,就完全打不开,主窗口也没有移动,只出现了一个半透明的mask,但是 左边的窗口和drawer效果,毫无影响,从头到尾都可以顺利弹出。请帮我看看是什么问题?代码见下:

            var leftDrawer=null,rightDrawer=null,rootWindow=null;  
            var leftDrawerStatus=false, rightDrawerStatus=false;  
            var isLeftInTransition=false,isRightInTransition=false;  
            mui.plusReady(function(){  
                plus.screen.lockOrientation('portrait-primary');  
                rootWindow=plus.webview.currentWebview();  
                rootWindow.addEventListener('maskClick',function(){  
                    if(leftDrawerStatus){  
                        closeLeftDrawer();  
                    }  
                    else{  
                        closeRightDrawer();  
                    }  
                });  
                setTimeout(function(){  
                    leftDrawer=mui.preload({  
                        id:'leftDrawer',  
                        url:'leftDrawer.html',  
                        styles:{  
                            left:0,  
                            top:0,  
                            width:'70%',  
                            zindex:-1  
                        },  
                        show:{  
                            aniShow:'none'  
                        }  
                    });  
                    rightDrawer=mui.preload({  
                        id:'rightDrawer',  
                        url:'rightDrawer.html',  
                        styles:{  
                            right:0,  
                            top:0,  
                            width:'70%',  
                            zindex:-1  
                        },  
                        show:{  
                            aniShow:'none'  
                        }  
                    });                   
    
                },200);   
    
                function openLeftDrawer(){  
    
                    if(isLeftInTransition){  
                        return ;  
                    }  
    
                    if(!leftDrawerStatus){  
                        isLeftIntransition=true;  
                        leftDrawer.setStyle({  
                            mask: 'rgba(0,0,0,0)'  
                        });  
                        leftDrawer.show('none', 0, function() {  
                            rootWindow.setStyle({  
                                mask: 'rgba(0,0,0,0.4)',  
                                left: '70%',  
                                transition: {  
                                    duration: 150  
                                }  
                            });  
                            mui.later(function() {  
                                isLeftInTransition = false;  
                                leftDrawer.setStyle({  
                                    mask: "none"  
                                });  
                            }, 160);  
                            leftDrawerStatus = true;  
                        });                       
                    }  
    
                };  
    
                function openRightDrawer(){  
    
                    if(isRightInTransition){  
                        return ;  
                    }  
    
                    if(!rightDrawerStatus){  
                        isRightInTransition=true;  
                        rightDrawer.setStyle({  
                            mask: 'rgba(0,0,0,0)'  
                        });  
    
                        rightDrawer.show('none', 0, function() {  
                            rootWindow.setStyle({  
                                mask: 'rgba(0,0,0,0.4)',  
                                right: '70%',  
                                transition: {  
                                    duration: 150  
                                }  
                            });  
    
                            mui.later(function() {  
                                isRightInTransition = false;  
                                rightDrawer.setStyle({  
                                    mask: "none"  
                                });  
                            }, 160);  
                            rightDrawerStatus = true;  
                        });                       
                    }  
    
                };  
    
                function closeLeftDrawer() {  
                    if (isLeftInTransition) {  
                        return;  
                    }  
                    if (leftDrawerStatus) {  
                        isLeftInTransition = true;  
                        rootWindow.setStyle({  
                            mask: 'none',  
                            left: 0,  
                            transition: {  
                                duration: 200  
                            }  
                        });  
                        leftDrawerStatus = false;  
                        mui.later(function() {  
                            isLeftInTransition = false;  
                            leftDrawer.hide();  
                        }, 300);  
                    }  
                };  
    
                function closeRightDrawer() {  
                    if (isRightInTransition) {  
                        return;  
                    }  
                    if (rightDrawerStatus) {  
                        isRightInTransition = true;  
                        rootWindow.setStyle({  
                            mask: 'none',  
                            right: 0,  
                            transition: {  
                                duration: 200  
                            }  
                        });  
                        rightDrawerStatus = false;  
                        mui.later(function() {  
                            isRightInTransition = false;  
                            rightDrawer.hide();  
                        }, 300);  
                    }  
                };  
    
                document.querySelector('#leftDrawer').addEventListener('tap',function(e){  
                    if(leftDrawerStatus){  
                        closeLeftDrawer();  
                    }  
                    else{  
                        openLeftDrawer();  
                    }  
                });       
    
                document.querySelector('#rightDrawer').addEventListener('tap',function(e){  
                    if(rightDrawerStatus){  
                        closeRightDrawer();  
                    }  
                    else{  
                        openRightDrawer();  
                    }  
    
                });   
    });

    感谢!

2015-12-10 18:37 负责人:无 分享
已邀请:
DCloud_UNI_FXY

DCloud_UNI_FXY

发一个可直接运行的测试工程

  • shwanYu (作者)

    就这些了,刚开始学习。加载的 leftdrawer.html和rightdrawer.html是我从Hbuilder样例中随便找的,没有其他内容和代码了!

    2015-12-10 21:38

shwanYu

shwanYu (作者)

没有什么工程,刚开始学习,就这些代码了。加载的 leftdrawer.html和rightdrawer.html是我从Hbuilder样例中随便找的。请帮忙看下是什么情况!谢谢!

  • DCloud_UNI_FXY

    发一个可直接运行的测试工程

    2015-12-11 16:28

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