在进行编写项目时,运用了侧滑导航,但是在各个页面间跳转时遇到了各种bug,现在希望大神能提供一个完整的、带导航项相互跳转的完整demo代码,谢谢!
- 发布:2014-11-20 19:57
- 更新:2015-03-05 10:56
- 阅读:7543
明白了,你现在的侧滑菜单zindex是-1是吧?因为它的zindex值过低,导致被你的登陆界面遮住了;
那你应该参考hello mui中offcanvas示例;
关键步骤:
创建主界面时设置zindex,例如hello mui中list.html代码:
mui.openWindow({
id: id,
url: this.href,
styles: {
zindex: 9999
}
});
然后在主页面中创建菜单界面,zindex值设的稍微小一点,例如:
menu = mui.preload({
id: 'offcanvas-plus-menu',
url: 'offcanvas-plus-menu.html',
styles: {
left: left,
width: '70%',
zindex: 9998
},
show:{
aniShow:'none'
},
waiting:{
autoShow:false
}
});
hello mui临时增加了侧滑导航,参考hello mui 首页面及首页侧滑页面两个页面;
你可以直接从github上下载完整Hello mui,运行后看效果。
-
Vincent (作者)
首先感谢你的回答,hello mui上的那个实例我懂,并能够自己实现,但关键是侧滑导航栏展开后,点击里面的导航条导航到其他页面时出现了各种bug,所以希望有一整套的demo代码可供参考
2014-11-21 00:57
-
Vincent (作者)
回复 DCloud_UNI_CHB:难道是我的手机问题吗?我下载了hello mui的app,点击右滑菜单,然后在弹出的侧滑菜单里,我点击任何一个Item,都没有任何反应
2014-11-25 16:53
是首页的右滑菜单吗?应该长这个样子吧?
-
Vincent (作者)
回复 DCloud_UNI_CHB:不过,为什么我在调用mui.hide和mui.show的时候没有任何作用,并且侧滑菜单出不来。然后我手动的修改,将其改成menu.setstyle{zindex:'9990'}就可以出来侧滑菜单,但是动画效果非常的不好
2014-11-25 20:17
-
Vincent (作者)
回复 DCloud_UNI_CHB:有,在index.html中有一个function toogleMenu(),其中调用了mui.hide和mui.show,但是我使用这两句话,只会发生主页面向右侧滑,但是侧滑菜单不会显示。
2014-11-25 20:46
-
Vincent (作者)
回复 DCloud_UNI_CHB:我打错了,我写的就是menu.hide。我找到原因了,但是没找到解决方法。原因是我首先执行了一个登陆页面,登陆成功后,进行了openWindow到达该页面(此时登陆页面还在,因为我不知道如何在登陆成功后关闭登陆页面,ps:我的登陆页面是index.html的一个子页面,如list.html是index.html的子页面一样),然后当我点击menu-bar那个按钮时,会出现主页面的向右滑动以及恢复,但是侧滑菜单不会出现,导致右边是我的登陆页面(前面说了,由于登陆页面我不会关闭,所以即便侧滑菜单没有出现,也不是白屏)。以上就是我目前遇到的所有问题。谢谢!
2014-11-25 21:39
Vincent (作者)
好的,谢谢你的耐心讲解
2014-11-26 10:03
Vincent (作者)
你好,我想顺便问一下,如何实现在成功登陆之后就关闭登陆界面(有没有这个必要?因为我觉得登陆成功之后登陆界面就没有任何存在的必要了)
2014-11-26 10:49
DCloud_UNI_CHB
你可以登录成功后,关闭或隐藏都行;
2014-11-26 11:53
Vincent (作者)
回复 DCloud_UNI_CHB:我想补充一点的就是,针对你上述的解决方案,的确可以解决侧滑菜单出现的问题,但出现的另一个问题是,动画。采用这种方案,就无法实现像hello-mui的首页那样菜单和主页同时平滑的向左或者向右滑动,而是出现了以下的效果:向右滑动时,侧滑菜单突然出现,然后主页平滑的向右滑动;向左收回时,主页先向左平滑的滑动,然后侧滑菜单突然消失。
2014-11-26 16:40
Vincent (作者)
回复 DCloud_UNI_CHB:而且,我在想,既然菜单和主页的zindex的值分别是9998和9999,那么只要我移动主页向右向左移动,不就相当于菜单的显示或者不显示嘛!所以我就删掉了menu.hide()以及menu.show(),可是结果表明这样的想法是错的,我不知道为什么。求解,谢谢!
2014-11-26 17:02
DCloud_UNI_CHB
创建menu的时候设置这样的参数没?show:{aniShow:'none' };向右滑动时,菜单在主页下方,他的显示你应该是看不到的;向左滑动时,菜单的消失你也应该看不到(hello mui中设了settimeout来规定菜单消失的时机);
2014-11-26 17:40
Vincent (作者)
回复 DCloud_UNI_CHB:和hello mui里面的关于侧滑菜单的js是完全一样的,仅仅将menu的index改为了9998,因为主页的zindex是9999。
2014-11-26 18:12
Vincent (作者)
回复 DCloud_UNI_CHB:我对原来的js进行了修改:让menu最初始的left为-70%,然后点击之后就修改其left为0,再点击之后就又修改为-70%,这样就基本实现了菜单和主页同步移动的功能,但是出现了一个很怪异的现象,就是侧滑菜单的那些li点击之后没有任何反应。
2014-11-26 23:59