mui顶部菜单栏弹出框遮挡问题

问题描述
要求实现的就是在主页面index下subpages4个子页面作为navtab,而点击顶部的菜单栏右上角会有弹出窗口,问题是弹出窗口在subpages下会被遮盖
这里写图片描述
解决方案:
1. 看到最多的解决方案是将弹出菜单写在子页面中,在header的html里捕获到点击按钮事件后,通过evaljs给子页面,弹出菜单,不过这种方法弄了好久没有实现,希望有谁会的看到给个小demo谢谢。
2. 新建一个webview命名为menu.html,将弹出窗口放在新建的menu.html中,js代码如下

        <script src="js/mui.min.js"></script>
        <script type="text/javascript">
            //子页面
            mui.init({
                subpages: [{
                    url: 'list1.html',
                    id: 'list1',
                    styles: {
                        top: '45px',
                        bottom: '45px'
                    }
                }]
            });
        var floatw = null;
            mui.plusReady(function() {
                ws = plus.webview.currentWebview();
                //新建webview命名menu.html,设置背景可见
                floatw = plus.webview.create("menu.html", "menu", {
                    background: "transparent",
                    zindex: 10,
                })
            })
            //顶部右上角按钮menu触发弹出菜单
            document.getElementById('menu').addEventListener('tap', function() {
                mui.openWindow('menu.html', 'menu');
            })
        </script>

最后效果,
这里写图片描述
menu附件在以下链接,也是看了这个帖子才有了以上结果

http://ask.dcloud.net.cn/article/965

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值