子webview会把父元素webview的侧滑菜单盖住，怎么解决

分类：MUI

Webview mui

刚刚没发现图挂了。。。这里不能传本地图，我就直接发链接吧

这是手机上的截图http://imgsrc.baidu.com/forum/pic/item/5e00972a2834349b46531023ceea15ce37d3bee8.jpg
我想要的效果是这样的http://imgsrc.baidu.com/forum/pic/item/cfa2cf5494eef01fbf6e6163e7fe9925bd317dcf.jpg

下面是两个页面的代码

父页面

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <title></title>  
    <script src="js/mui.min.js"></script>  
    <link href="css/mui.min.css" rel="stylesheet"/>  
    <script type="text/javascript" charset="UTF-8">  
        mui.init({  
            subpages:[{  
                url:"index.html",  
                styles:{  
                    top:"44px",  
                    bottom:"44px"  
                }  
            }]  
        });  
    </script>  
</head>  
<body>  
    <div class="mui-off-canvas-wrap mui-draggable">  
        <div class="mui-inner-wrap">  
            <aside class="mui-off-canvas-left">  
                <div class="mui-scroll-wrapper">  
                    <div class="mui-scroll">  
                        <ul class="mui-table-view">  
                            <li class="mui-table-view-cell mui-active">link1</li>  
                            <li class="mui-table-view-cell">link2</li>  
                        </ul>  
                    </div>  
                </div>  
            </aside>  
            <header class="mui-bar mui-bar-nav">  
                <span class="mui-icon mui-icon-bars mui-active" id="menu-switch"></span>  
                <h1 class="mui-title">Title</h1>  
            </header>  
            <nav class="mui-bar mui-bar-tab">  
                <a class="mui-tab-item">  
                    <span class="mui-icon mui-icon-home"></span>  
                    <span class="mui-tab-label">Home</span>  
                </a>  
                <a class="mui-tab-item">  
                    <span class="mui-icon mui-icon-contact"></span>  
                    <span class="mui-tab-label">Info</span>  
                </a>  
            </nav>  
        </div>  
    </div>  
    <script>  
        var menuSwitch = document.getElementById("menu-switch");  

        //监听左滑菜单按钮  
        menuSwitch.addEventListener("tap",function(){  
            mui(".mui-off-canvas-left").offCanvas("show");  
        });  
    </script>  
</body>  
</html>

子页面

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <title></title>  
    <script src="js/mui.min.js"></script>  
    <link href="css/mui.min.css" rel="stylesheet"/>  
    <link rel="icon" href="images/1.ico" />  
    <script type="text/javascript" charset="utf-8">  
        mui.init();  
    </script>  
</head>  
<body>  

    <div class="mui-content mui-scroll-wrapper">  
        <div class="mui-scroll">  
            <div class="mui-slider">  
                <div class="mui-slider-group mui-slider-loop" id="gallery-group"></div>  
                <div class="mui-slider-indicator" id="gallery-indicator"></div>  
            </div>  
        </div>  
    </div>  

    <script>  
        var falseData = {};  
        falseData.imgSrc = ["images/1.jpg","images/2.jpg","images/3.jpg"];  

        gallery(falseData.imgSrc);  

        function gallery(imgArr){  
            /*渲染轮播组件*/  
            var galleryGroup = document.getElementById("gallery-group"),  
                galleryIndicator = document.getElementById("gallery-indicator"),  
                groupContent = "",  
                indicatorContent = "",  
                aux= [];//占位图片  
            aux.push("<div class='mui-slider-item mui-slider-item-duplicate'><a><img src='"+imgArr[imgArr.length-1]+"'/></a></div>");  
            aux.push("<div class='mui-slider-item mui-slider-item-duplicate'><a><img src='"+imgArr[0]+"'/></a></div>");  
            groupContent = aux[0]+"<div class='mui-slider-item'><a><img src='"+imgArr.join("'/></a></div><div class='mui-slider-item'><a><img src='")+"'/></a></div>"+aux[1];  
            for(var i=0,j=imgArr.length;i<j;i++){  
                if(i===0){  
                    indicatorContent +="<div class='mui-indicator mui-active'></div>";  
                    continue;  
                }  
                indicatorContent +="<div class='mui-indicator'></div>";  
            }  
            galleryGroup.innerHTML = groupContent;  
            galleryIndicator.innerHTML = indicatorContent;  
            mui(".mui-slider").slider({  
                interval:1000  
            });  
        }  

        mui.plusReady(function(){  
            plus.key.addEventListener("backbutton",function(){  
                plus.runtime.quit();  
            })  
        })  
    </script>  
</body>  
</html>

2016-04-07 14:16 负责人:无分享

4 个回复

马脸老男人 - Bazinga！

主页面：

<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="utf-8">  
        <title>Hello MUI</title>  
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  

        <link rel="stylesheet" href="css/mui.min.css">  
    </head>  

    <body>  
        <header class="mui-bar mui-bar-nav">  
            <a class="mui-icon mui-icon-bars mui-pull-left mui-plus-visible"></a>  
            <h1 class="mui-title">Hello mui</h1>  
        </header>  
        <script src="js/mui.min.js"></script>  
        <script src="js/update.js" type="text/javascript" charset="utf-8"></script>  
        <script>  
            var menu = null,  
                main = null;  
            var showMenu = false;  
            mui.init({  
                swipeBack: false,  
                statusBarBackground: '#f7f7f7',  
                gestureConfig: {  
                    doubletap: true  
                },  
                subpages: [{  
                    id: 'list',  
                    url: 'list.html',  
                    styles: {  
                        top: '45px',  
                        bottom: 0,  
                        bounce: 'vertical'  
                    }  
                }]  
            });  
            mui.plusReady(function() {  
                //仅支持竖屏显示  
                plus.screen.lockOrientation("portrait-primary");  
                main = plus.webview.currentWebview();  
                main.addEventListener('maskClick', closeMenu);  
                //处理侧滑导航，为了避免和子页面初始化等竞争资源，延迟加载侧滑页面；  
                setTimeout(function() {  
                    menu = mui.preload({  
                        id: 'menu.html',  
                        url: 'menu.html',  
                        styles: {  
                            left: 0,  
                            width: '70%',  
                            zindex: -1  
                        },  
                        show: {  
                            aniShow: 'none'  
                        }  
                    });  
                }, 200);  
            });  
            var isInTransition = false;  
            /**  
             * 显示侧滑菜单  
             */  
            function openMenu() {  
                if (isInTransition) {  
                    return;  
                }  
                if (!showMenu) {  
                    //侧滑菜单处于隐藏状态，则立即显示出来；  
                    isInTransition = true;  
                    menu.setStyle({  
                        mask: 'rgba(0,0,0,0)'  
                    }); //menu设置透明遮罩防止点击  
                    menu.show('none', 0, function() {  
                        //主窗体开始侧滑并显示遮罩  
                        main.setStyle({  
                            mask: 'rgba(0,0,0,0.4)',  
                            left: '70%',  
                            transition: {  
                                duration: 150  
                            }  
                        });  
                        mui.later(function() {  
                            isInTransition = false;  
                            menu.setStyle({  
                                mask: "none"  
                            }); //移除menu的mask  
                        }, 160);  
                        showMenu = true;  
                    });  
                }  
            };  
            /**  
             * 关闭菜单  
             */  
            function closeMenu() {  
                if (isInTransition) {  
                    return;  
                }  
                if (showMenu) {  
                    //关闭遮罩；  
                    //主窗体开始侧滑；  
                    isInTransition = true;  
                    main.setStyle({  
                        mask: 'none',  
                        left: '0',  
                        transition: {  
                            duration: 200  
                        }  
                    });  
                    showMenu = false;  
                    //等动画结束后，隐藏菜单webview，节省资源；  
                    mui.later(function() {  
                        isInTransition = false;  
                        menu.hide();  
                    }, 300);  
                }  
            };  
            //点击左上角侧滑图标，打开侧滑菜单；  
            document.querySelector('.mui-icon-bars').addEventListener('tap', function(e) {  
                if (showMenu) {  
                    closeMenu();  
                } else {  
                    openMenu();  
                }  
            });  
            //主界面向右滑动，若菜单未显示，则显示菜单；否则不做任何操作  
            window.addEventListener("swiperight", openMenu);  
            //主界面向左滑动，若菜单已显示，则关闭菜单；否则，不做任何操作；  
            window.addEventListener("swipeleft", closeMenu);  
            //侧滑菜单触发关闭菜单命令  
            window.addEventListener("menu:close", closeMenu);  
            window.addEventListener("menu:open", openMenu);  
        </script>  
    </body>  

</html>

马脸老男人 - Bazinga！

子页面：

<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="utf-8">  
        <title>Hello MUI</title>  
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  
        <link rel="stylesheet" href="css/mui.min.css">  
        <style type="text/css">  
            #list {  
                /*避免导航边框和列表背景边框重叠，看起来像两条边框似得；*/  
                margin-top: -1px;  
            }  
        </style>  
    </head>  

    <body>  
        <div class="mui-content">  
            <ul id="list" class="mui-table-view mui-table-view-chevron">  
                <li class="mui-table-view-cell">  
                    <a class="mui-navigate-right" href="examples/accordion.html">  
                        accordion（折叠面板）  
                    </a>  
                </li>  
                <li class="mui-table-view-cell mui-collapse">  
                    <a class="mui-navigate-right" href="#">  
                        actionsheet（操作表）  
                    </a>  
                    <ul class="mui-table-view mui-table-view-chevron">  
                        <li class="mui-table-view-cell">  
                            <a class="mui-navigate-right" href="examples/actionsheet.html">  
                                H5模式actionsheet  
                            </a>  
                        </li>  
                        <li class="mui-table-view-cell mui-plus-visible">  
                            <a class="mui-navigate-right" href="examples/actionsheet-plus.html">  
                                原生模式actionsheet  
                            </a>  
                        </li>  
                    </ul>  
                </li>  
            </ul>  

        </div>  
        <script src="js/mui.min.js"></script>  
        <script>  
            var index = null; //主页面  
            function openMenu() {  
                !index && (index = mui.currentWebview.parent());  
                mui.fire(index, "menu:open");  
            }  
            //在android4.4.2中的swipe事件，需要preventDefault一下，否则触发不正常  
            window.addEventListener('dragstart', function(e) {  
                mui.gestures.touch.lockDirection = true; //锁定方向  
                mui.gestures.touch.startDirection = e.detail.direction;  
            });  
            window.addEventListener('dragright', function(e) {  
                if (!mui.isScrolling) {  
                    e.detail.gesture.preventDefault();  
                }  
            });  
             //监听右滑事件，若侧滑菜单未显示，右滑要显示菜单；  
            window.addEventListener("swiperight", function(e) {  
                //默认滑动角度在-45度到45度之间，都会触发右滑菜单，为避免误操作，可自定义限制滑动角度；  
                if (Math.abs(e.detail.angle) < 4) {  
                    openMenu();  
                }  
            });  
        </script>  
    </body>  

</html>

马脸老男人 - Bazinga！

侧滑页面：

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <title>Hello MUI</title>  
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  
        <link rel="stylesheet" href="css/mui.min.css">  
        <style type="text/css">  
            body,.mui-content{  
                background-color: #333;  
                color:#fff;  
              }  
              .title{  
                margin: 35px 15px 10px;  
              }  
              .title+.content{  
                margin: 10px 15px 35px;  
                color: #bbb;  
                text-indent: 1em;  
                font-size: 14px;  
                line-height: 24px;  
              }  
              .mui-table-view{  
                margin-bottom: 35px;  
              }  
        </style>  
    </head>  

    <body>  
        <div class="mui-content">  
            <div class="title">侧滑导航</div>  
            <div class="content">  
                这是首页侧滑导航示例，你可以在这里放置任何内容；关闭侧滑菜单有多种方式：  
                1.点击本侧滑菜单页之外的任意位置;  
                2.点击如下红色按钮<span id="android-only">；3.Android手机按back键；4.Android手机按menu键  
                </span>。  
                <p style="margin: 10px 15px;">  
                    <button id="close-btn" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">关闭侧滑菜单</button>  
                </p>  

            </div>  
            <div class="title" style="margin-bottom: 25px;">mui典型控件</div>  
            <ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted" style="color: #ddd;">  
                <li class="mui-table-view-cell">  
                    <a class="mui-navigate-right" open-type="common" href="examples/pullrefresh_main.html">  
                        下拉刷新  
                    </a>  
                </li>  
                <li class="mui-table-view-cell">  
                    <a class="mui-navigate-right" open-type="common" href="examples/offcanvas-drag-left.html">  
                        侧滑导航  
                    </a>  
                </li>  
                <li class="mui-table-view-cell">  
                    <a class="mui-navigate-right" href="examples/switches.html">  
                        开关控件  
                    </a>  
                </li>  
                <li class="mui-table-view-cell">  
                    <a class="mui-navigate-right" href="examples/tableviews-with-swipe.html">  
                        列表左滑菜单  
                    </a>  
                </li>  
                <li class="mui-table-view-cell">  
                    <a class="mui-navigate-right" href="examples/tab-with-viewpagerindicator.html">  
                        可拖动式选项卡  
                    </a>  
                </li>  
            </ul>  
        </div>  
        <script src="js/mui.min.js"></script>  
        <script type="text/javascript" charset="utf-8">  
            var aniShow = "slide-in-right";  
            //关于backbutton和menubutton两个按键的说明，在iOS平台不存在，故需隐藏  
            if(!mui.os.android){  
                var span = document.getElementById("android-only")  
                if(span){  
                    span.style.display = "none";  
                }  
                aniShow = "pop-in";  
            }  
            var subWebview=null,template=null,index=null;  
            mui.plusReady(function () {  
                //获得主页面webview引用；  
                index = plus.webview.currentWebview().opener();  
            })  
            mui('.mui-table-view').on('tap', 'a', function() {  
                var id = this.getAttribute("href");  
                var type = this.getAttribute("open-type");  
                var href = this.href;  
                if(type=="common"||mui.os.ios){  
                    var webview_style = {  
                        popGesture: "close"  
                    };  
                    mui.openWindow({  
                        id: id,  
                        url: href,  
                        styles: webview_style,  
                        show: {  
                            aniShow: aniShow  
                        },  
                        waiting: {  
                            autoShow: false  
                        }  
                    });  
                }else{  
                    var href = this.href;  
                    var title = this.innerText;  
                    template = plus.webview.getWebviewById("default-main");  
                    //获得共用子webview  
                    subWebview = template.children()[0];  

                    //通知模板修改标题，并显示隐藏右上角图标；  
                    mui.fire(template,'updateHeader',{title:title,showMenu:false});  
                    if (subWebview.getURL() != href) {  
                        subWebview.loadURL(href);  
                    } else {  
                         subWebview.show();  
                    }  
                    template.show('slide-in-right', 150);  
                }  
            });  

            /**  
             * 关闭侧滑菜单  
             */  
            function close() {  
                mui.fire(mui.currentWebview.opener(),"menu:close");  
            }  

            //点击“关闭侧滑菜单”按钮处理逻辑  
            document.getElementById("close-btn").addEventListener("tap",close);  
            //在android4.4.2中的swipe事件，需要preventDefault一下，否则触发不正常  
            window.addEventListener('dragstart',function(e){  
                mui.gestures.touch.lockDirection = true; //锁定方向  
                mui.gestures.touch.startDirection = e.detail.direction;  
            });  
            window.addEventListener('dragleft', function(e) {  
                if(!mui.isScrolling){  
                    e.detail.gesture.preventDefault();    
                }  
            });  
            //监听左滑事件，若菜单已展开，左滑要关闭菜单；  
            window.addEventListener("swipeleft",function (e) {  
                if(Math.abs(e.detail.angle)>170){  
                    close();                          
                }  
            });  
        </script>  
    </body>  

</html>

wodertian (作者)

额，我刚刚用另外一种思路解决了，等下回家再看下你的方法，先谢谢了

2016-04-07 18:06
马脸老男人

你可以把你的代码也贴出来吗？

2016-04-07 18:09

马脸老男人 - Bazinga！

刚在整理的时候又发现了一个问题：主页面要放在App首页，如果主页面不是App首页的话，记得在App首页的mui.init里加段代码，具体如下：

    mui.init({  
        main = plus.webview.currentWebview();  
    });

马脸老男人

加这段代码还是有问题，目前只能放在首页，实在抱歉！

2016-04-08 10:57

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

子webview会把父元素webview的侧滑菜单盖住，怎么解决

4 个回复

公告

相关问题

子webview会把父元素webview的侧滑菜单盖住，怎么解决

与内容相关的链接

4 个回复

公告

相关问题