DCloud_UNI_CHB
DCloud_UNI_CHB
  • 发布:2014-09-12 15:10
  • 更新:2014-09-12 15:10
  • 阅读:22126

mui框架如何在首页使用侧滑导航

分类:MUI

说明:这是针对老版本hello mui的一篇说明;mui 0.7.1之后,Hello mui已在首页增加了侧滑导航示例,可直接参考。

很多同学直接拷贝Hello mui中的侧滑导航示例,作为App的首页,发现侧滑效果总是和示例不同,很是疑惑;

其实,首页侧滑不生效的原因主要有两点:
1、首页面不是通过mui.openWindow()方法打开的,而是5+ runtime直接打开的,因此不会触发pagebeforeshow事件,故menu页面没创建成功,移动主页面后,漏出了更下方的loading界面;
2、hello mui中侧滑主界面zindex值为9999,menu页面zindex值为9998,在主界面下方,移动主界面会漏出其下方的menu界面;而App首页主界面的zindex值为0(mui.openWindow方法若不传zindex值,默认也是0),若再创建zindex值为9998的menu页面(zindex类似css中的z-index,值越大,显示越靠上),menu页面就会遮罩在主界面上方;

第一个问题的解决方法比较简单,使用plusReady事件代替pagebeforeshow事件即可;

第二个问题的解决,也比较简单,设置menu的zindex更低即可,比如设置为-1;

修改后的主页面代码如下:

mui.plusReady(function() {        
        var left = '0%';  
        if (slideTogether) {  
            left = '-70%';  
        }  
        //创建menu页面  
        menu = mui.createWindow({  
            id: 'offcanvas-plus-menu',  
            url: 'offcanvas-plus-menu.html',  
            styles: {  
                left: left,  
                width: '70%',  
                zindex:-1  
            }  
        });  
        if (menu) {  
            menu.show('none');  
        }  
    });

另外,首页的关闭通常采用toast提示的方式,对应需要修改。

5 关注 分享
神才 hellojh Curtis 伤而无味 liucheng100

要回复文章请先登录注册

9***@qq.com

9***@qq.com

回复 9***@qq.com :
已解决,用js动态完成
2017-12-18 11:18
9***@qq.com

9***@qq.com

hello mui中首页的头部文件为啥那么找不到啊,求大神指教
2017-12-18 11:12
2***@qq.com

2***@qq.com

回复 DCloud_UNI_CHB :
里面应该怎么写,才能切换页面1 页面2这样?请教
2017-12-06 11:23
Native_O

Native_O

这种方式 适合底部没有导航栏的情况,毕竟遮罩层也是当前页面,无法覆盖底部导航栏页面(父页面),所以底部的导航栏还是会漏出来一角。。。
2017-06-30 13:54
DCloud_UNI_CHB

DCloud_UNI_CHB (作者)

回复 真二 :
最新版本的hello mui已在首页增加侧滑导航示例,可参考。
2014-11-25 19:50
真二

真二

按贴里的方法,侧滑后,显示的是启动界面。把代码改成页面加载完修改主页的zindex也不行,如下,侧滑后显示出来的还是启动界面

mui.plusReady(function() {
var curview = plus.webview.currentWebview();
curview.setStyle({
zindex: 10,
left: 0
});
var left = '0%';
if (slideTogether) {
left = '-70%';
}
//创建menu页面
menu = mui.createWindow({
id: 'offcanvas-plus-menu',
url: 'offcanvas-plus-menu.html',
styles: {
left: left,
width: '70%',
zindex:9
}
});
if (menu) {
menu.show('none');
}
});
2014-10-16 14:33
DSunShine

DSunShine

这个还是没能解决问题呢,刚启动还可以,但是在点击的时候就不信了,,页面就不出来了
2014-09-12 16:05