指上弹兵
指上弹兵
  • 发布:2015-05-11 16:37
  • 更新:2015-05-12 13:07
  • 阅读:2610

MUI侧滑菜单

分类:MUI

根据文档:
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".
保存,测试,没问题了。

是我哪里没注意到吗?还是文档更新不同步?麻烦检查一下。

2015-05-11 16:37 负责人:无 分享
已邀请:
DCloud_UNI_FXY

DCloud_UNI_FXY

试下hello-mui中的offcanvas-drag-left|right.html里的代码

  • 指上弹兵 (作者)

    也就是说,还是需要设置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

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