根据文档:
http://dev.dcloud.net.cn/mui/javascript/#plugin-offcanvas
我先尝试了
动画1:主界面移动、菜单不动
复制示例代码:
<!-- 侧滑导航根容器 -->
<div class="mui-off-canvas-wrap mui-draggable">
<!-- 菜单容器 -->
<aside class="mui-off-canvas-left">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<!-- 菜单具体展示内容 -->
...
<div>
</div>
</aside>
<!-- 主页面容器 -->
<div class="mui-inner-wrap">
<!-- 主页面标题 -->
<header class="mui-bar mui-bar-nav">
<a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>
<h1 class="mui-title">标题</h1>
</header>
<div class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!-- 主界面具体展示内容 -->
...
</div>
</div>
</div>
</div>
保存,运行在手机上,结果菜单滑出没问题,往回滑的时候只有header部分在动。
我又根据 动画2 的提示,加入了:
mui-slide-in
保存,测试,在主界面向右拖动(drag)没问题了,菜单滑出和回滑都很正常,但是点击含有mui-action-menu类的控件却没有反应。
我又按照CSS组件说明文档里的侧滑导航(左侧)的示例,
http://dev.dcloud.net.cn/mui/components/
设置aside的 id="offCanvas" ,并且header里的 a 设置了 href="#offCanvas".
保存,测试,没问题了。
是我哪里没注意到吗?还是文档更新不同步?麻烦检查一下。
指上弹兵 (作者)
也就是说,还是需要设置href="#offCanvasSide",与mui-action-menu无关是吗?
那这样的话,请更正文档:
http://dev.dcloud.net.cn/mui/javascript/#plugin-offcanvas
2015-05-12 13:38
DCloud_UNI_FXY
mui-action-menu是为了响应android的菜单按键,href="#offCanvasSide"这个才是处理菜单的展开与关闭。
2015-05-12 13:42