YanRong
YanRong
  • 发布:2015-03-02 21:43
  • 更新:2016-07-15 14:26
  • 阅读:2494

关于侧滑菜单的背景显示问题

分类:MUI

我需要实现如下的页面流程:

登录画面(A) -> 列表画面(B)

A页面使用如下方式跳转到B页面:

                document.getElementById("loginBtn").addEventListener('tap', function(){  

                    mui.openWindow(  
                        {  
                            url:'mainShow.html',  
                            id:'mainShow'  
                        }  
                    );  
                });

在B画面(mainShow.html),有一个侧滑菜单。

按照hellomui 的例子来做(也就是webview模式),应该不是很难的,但是出现一个问题:

在B页面侧滑出菜单的时候,菜单的内容显示为 A 页面。

看起来的感觉,就好像是 B 页面覆盖在 A 页面上,但是侧滑菜单会把后面的A页面给显示出来。

所以代码只好改成了下面这个样子:

                document.getElementById("loginBtn").addEventListener('tap', function(){  

                    mui.openWindow(  
                        {  
                            url:'mainShow.html',  
                            id:'mainShow'  
                        }  
                    );  
                    plus.webview.currentWebview().hide(); // 增加了这句  

                });

试过了 plus.webview.currentWebview().close(),那整个应用就直接关闭了。

想问一下这是 mui 的设计方式,还是哪个地方代码写的有问题呢?

2015-03-02 21:43 负责人:无 分享
已邀请:
YanRong

YanRong (作者)

我在A页面的按钮事件中使用了如下代码:

document.getElementById("loginBtn").addEventListener('tap', function(){  

    mui.openWindow(  
        {  
            url:'mainShow.html',  
            id:'mainShow'  
        }  
    );  
    var webview = plus.webview.getWebviewById("mainShow");  
    webview.zIndex = "999";  
    plus.webview.currentWebview().zIndex = "0";  

});

跳转到 mainShow.html 画面后,侧滑带单的背景仍然是A页面。

顺便想问一下,使用 mui.openWindow方法,从A画面跳转到B画面,plus.webview.currentWebview() 得到的webview,是A画面还是B画面?

DCloud_heavensoft

DCloud_heavensoft

你需要仔细看下plus.webview的api,这种情况9成是2个问题造成的,重复打开了相同url的webview,另一个是webview的style里的zindex没搞清楚。

DCloud_UNI_CHB

DCloud_UNI_CHB

看一下你从B页面是如何触发侧滑菜单显示的;

hello mui中list.html类似你的A页面,offcanvas-drag-left-plus-main.html类似你的B页面,offcanvas-drag-left-plus-menu.html是侧滑出的子菜单,没问题的。

DCloud_UNI_CHB

DCloud_UNI_CHB

1、plus.webview.currentWebview()返回的是对应js代码执行的宿主环境,这行代码你应该写在A页面中,故返回的是A页面;
2、mainShow.html的zindex没必要单独设置,在openWindow方法中统一设置即可:

mui.openWindow({  
    url:'mainShow.html',  
    id:'mainShow',  
    styles:{  
        zindex:999  
    }  
});

3、你的侧滑菜单页面zindex值是多少?设置为998试试;

YanRong

YanRong (作者)

你的侧滑菜单页面zindex值是多少?设置为998试试;

太感谢了!我找到原因了。

mui的侧滑菜单的列子里,zindex = -1 ,所以不会显示在最上面。
改成大于0就可以了。

非常感谢!

学习了

学习了 - 自学慢慢来,学习是无尽的。但是用功、受挫、bug也是必然

谢谢前面楼上解答。

tony_ddd

tony_ddd - 平常心

谢谢前面楼上解答。

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