killet
killet
  • 发布:2014-12-08 10:08
  • 更新:2019-01-04 17:36
  • 阅读:7458

父webview中预加载的popover弹出菜单 ,当子页面显示后,父页面会被覆盖掉

分类:MUI
mui

父webview中预加载的popover弹出菜单 ,当子页面显示后,父页面会被覆盖掉
代码如下:

<!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="http://ask.dcloud.net.cn/css/mui.min.css" rel="stylesheet" />  
        <script type="text/javascript" charset="utf-8">  
            mui.init();  
        </script>  
    </head>  

    <body>  
        <div class="mui-content">  

            <header class="mui-bar mui-bar-nav">  
                <a href="javascript:history.go( -1 );" class="mui-icon mui-icon-left-nav mui-pull-left"></a>  
                <a id="classMenu" class="mui-icon mui-icon-bars mui-pull-right"></a>  
                <h1 class="mui-title">首页</h1>  
            </header>  
        </div>  

    </body>  
    <script>  
        mui.plusReady(function() {  
            mui.preload({  
                id: 'menu',  
                url: 'menu.html',  
                show: {  
                    autoShow: true  
                }  

            });  
        });  

        document.getElementById('classMenu').addEventListener('tap', function() {  

            plus.webview.getWebviewById('menu').evalJS('mui("#topPopover").popover("toggle")');  
            plus.webview.currentWebview().append(plus.webview.getWebviewById('menu'));  
        });  
    </script>  

</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="http://ask.dcloud.net.cn/css/mui.min.css" rel="stylesheet"/>  
    <script type="text/javascript" charset="utf-8">  
        mui.init();  
    </script>  
    <style>  
            html,  
            body {  
                background-color: #efeff4;  
            }  
            /*header.mui-bar {  
                display: none;  
            }*/  

            .mui-content {  
                padding: 10px;  
            }  
    </style>  
    <style>  
            /*跨webview需要手动指定位置*/  

            #topPopover {  
                position: fixed;  
                top: 16px;  
                right: 6px;  
            }  
            #topPopover .mui-popover-arrow {  
                left: auto;  
                right: 6px;  
            }  
            #actionSheet .mui-table-view {  
                border-radius: 4px;  
            }  
            #actionSheet .mui-table-view-cell {  
                padding: 15px;  
                text-align: center;  
            }  
            #actionSheet .mui-table-view .mui-table-view-cell:first-child,  
            #actionSheet .mui-table-view .mui-table-view-cell:first-child>a:not(.mui-btn) {  
                border-top-right-radius: 4px;  
                border-top-left-radius: 4px;  
            }  
            #actionSheet .mui-table-view .mui-table-view-cell:last-child,  
            #actionSheet .mui-table-view .mui-table-view-cell:last-child>a:not(.mui-btn) {  
                border-bottom-right-radius: 4px;  
                border-bottom-left-radius: 4px;  
            }  
            .mui-backdrop-action.mui-backdrop {  
                bottom: 0;  
            }  
            p {  
                text-indent: 22px;  
            }  
            span.mui-icon {  
                font-size: 14px;  
                color: #007aff;  
                margin-left: -15px;  
                padding-right: 10px;  
            }  
            .mui-popover {  
                height: 300px;  
            }  
        </style>  
</head>  
<body>  
    <div class="mui-content">  
        <!--右上角弹出菜单-->  
        <div id="topPopover" class="mui-popover">  
            <div class="mui-popover-arrow"></div>  
            <div class="mui-scroll-wrapper">  
                <div class="mui-scroll">  
                    <ul class="mui-table-view">  
                        <li class="mui-table-view-cell"> <a href="#">Item1</a>  
                        </li>  
                        <li class="mui-table-view-cell"><a href="#">Item2</a>  
                        </li>  
                        <li class="mui-table-view-cell"><a href="#">Item3</a>  
                        </li>  
                        <li class="mui-table-view-cell"><a href="#">Item4</a>  
                        </li>  
                        <li class="mui-table-view-cell"><a href="#">Item5</a>  
                        </li>  
                        <li class="mui-table-view-cell"><a href="#">Item6</a>  
                        </li>  
                        <li class="mui-table-view-cell"><a href="#">Item7</a>  
                        </li>  
                        <li class="mui-table-view-cell"><a href="#">Item8</a>  
                        </li>  
                        <li class="mui-table-view-cell"><a href="#">Item9</a>  
                        </li>  
                        <li class="mui-table-view-cell"><a href="#">Item10</a>  
                        </li>  
                    </ul>  
                </div>  
            </div>  

        </div>  
    </div>  
    <script>  
            mui('.mui-scroll-wrapper').scroll();  
    </script>  
</body>  
</html>
2014-12-08 10:08 负责人:无 分享
已邀请:
DCloud_UNI_CHB

DCloud_UNI_CHB

你引用的css为什么会是这个地址?

<link href="http://ask.dcloud.net.cn/css/mui.min.css" rel="stylesheet"/>

另外,你的父页面代码很奇怪啊,为什么不使用subpages实现子页面呢?难道子页面的唯一作用就是为了实现popover?那就没必要了,在父页面中一样可以实现popover?

还有,子页面是完整覆盖父页面的?top、bottom都没设置?

1158027932@qq.com

1158027932@qq.com - 天下风云出我辈

我的解决办法是popover做成一个单独的webview.然后再做成父页面的子页面append进去。当然zIndex要设置的高一些。然后设置这个子页面background:transparent;高度宽度均为父页面100%

DCloud_UNI_CHB

DCloud_UNI_CHB

必然被覆盖,此时popover应该写在子页面中,参考hello mui中popover示例,点击右上角图标;

killet

killet (作者)

我有分两个页面啊,父页面调用子页面的popover,但是会覆盖,你看我上面的代码

killet

killet (作者)

@DCloud_MUI_CHB
我有分两个页面啊,父页面调用子页面的popover,但是会覆盖,你看我上面的代码

killet

killet (作者)

那个css的引用我复制代码的贴到这里自动 变的。。。不过你说的top和bottom没设置,还真是这样,我设置了就显示 了,谢谢了

killet

killet (作者)

@DCloud_MUI_CHB
现在是能显示了,但又有问题啊,如果还有别的子页面存在,那么这个弹出菜单弹出的时候,会把这个子页面给覆盖掉,用创建子页面的方式也是会这样,还有按你说的在父页面创建弹出菜单,这个就刚好反过来,弹出菜单会被已经存在的子页面给档住

  • DCloud_UNI_CHB

    不是很明白你描述的场景,最好有代码片段和对应的问题截图;若有完整测试工程代码,那是最好。

    2014-12-08 15:35

  • killet (作者)

    有代码啊,我在qq里q你,

    2014-12-08 15:45

  • killet (作者)

    26195503我的qq

    2014-12-08 15:47

  • BubbleBeast

    这个怎么解决的,我也遇到popover的菜单被子页面webview挡住,一头雾水

    2015-01-05 12:43

gq_long

gq_long

弱弱的问下,为什么我试之后,只弹出一次,在点击就没有反应

Mars_Zhong

Mars_Zhong

@DCloud_MUI_CHB 这个遮挡的问题有没有完整的示例啊,求解决,谢谢

  • 简小单

    请问 你解决了吗?我也遇到这个问题了,我就想做类似支付宝右上角的加号一个的功能,用WEBVIEW方式的选项卡貌似不生了,没招的话 只能改为DIV的选项卡了,不用子页面了

    2016-02-20 18:05

  • agilny007

    请问 你解决了吗?我也遇到这个问题了,求指教啊。。。

    2017-03-29 18:08

lifeng_tour@163.com

lifeng_tour@163.com

请问问题解决了没?

agilny007

agilny007

请问问题解决了没?我也遇到,求个解决方案

  • amyliuyan@163.com

    请问解决没?求分享

    2017-04-05 14:13

  • agilny007

    不用div,将菜单目录单独放一个webview解决的

    2017-04-05 14:39

  • 1779682373@qq.com

    解决了没,求分享

    2017-04-12 17:49

  • 673179458@qq.com

    回复 agilny007:请问可以分享一下代码么万分感谢673179458@qq.com

    2017-05-04 06:16

  • 果果丶

    回复 agilny007:请问怎么解决的,能分享一下吗?676737029@qq.com 十分感谢

    2017-08-09 20:11

  • 鸟鸟

    回复 果果丶:问题解决了没有?

    2017-09-14 10:10

  • 大鼻子

    大哥,问题解决了没有,能否分享下。houruiqiang1124@163.com

    2018-09-20 09:54

gangzai1122@163.com

gangzai1122@163.com

楼上解决了没?我也碰到了,麻烦分享下

gangzai1122@163.com

gangzai1122@163.com

楼上解决了没?我也碰到了,麻烦分享下

767684610@qq.com

767684610@qq.com

楼上的大神们解决没有啊,因为要用到下拉刷新,用到下拉刷新又必须创健子页面才能用,所以这里会冲突,popover就会被子页面覆盖。。。

auto555@qq.com

auto555@qq.com - 预加载的页面在input框输入内容的时候特别卡.这个算是BUG吗

我也遇到这问题了。。。怎么解决的。。

legolas1989@qq.com

legolas1989@qq.com

同问,怎么解决?

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