MUI侧滑菜单

MUI的侧滑菜单动画做得很不错，其中分为两种，一种是以webview，另一种是DIV形式

webview模式

主页面和菜单内容在不同的webview中，两个页面根据内容需求分别组织DOM结构，mui对其DOM结构无特殊要求，故其有如下优点：

• 菜单内容是单独的webview，故可被多个页面复用；
• 菜单内容在单独的webview中，菜单区域的滚动不影响主界面，故可使用原生滚动，滚动更为流畅；

另一方面，webview模式也有其缺点：

• 不支持拖动手势（跟手拖动）；
• 主页面、菜单不同webview实现，因此若需交互（如：点击菜单触发主页面内容变化），需使用自定义事件实现跨webview通讯；

div模式

主页面和菜单内容在同一个webview下，嵌套在特定结构的div中，通过div的移动动画模拟菜单移动；故该模式有如下优点：

• 支持拖动手势（跟手拖动）；
• 主页面、菜单在一个页面中，可通过JS轻松实现两者交互（如：点击菜单触发主页面内容变化），没有跨webview通讯的烦恼；

另一方面，div模式也有其缺点：

• 不支持菜单内容在多页面的复用，需每个页面都生成对应的菜单节点；
• 主界面和菜单内容的滚动互不影响，因此会使用div区域滚动，在低端Android手机且滚动内容较多时，可能会稍显卡顿；

个人倾向于使用DIV模式，因为菜单跟页面之间的交互是很频繁的，而且对于移动APP来说。支持拖动手势才是至关重要的。

下面简单的官方案例：

<div class="mui-off-canvas-wrap mui-draggable mui-slide-in"><!--包含菜单和主页面的容器-->
  <!-- 菜单容器 -->
  <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>

mui.init({
    swipeback:true//默认左滑返回，可以达到offCanvas.hide的目的
    
  });
  
  mui('body').on('swiperight','.mui-content',function(){//绑定右滑事件，当mui-content上发生右滑时（菜单原本是隐藏状//态的）
 mui('.mui-off-canvas-wrap').offCanvas('show');  //显示侧栏	
  });
  //关于侧滑栏的动画有N种，这里是主界面不懂，菜单栏动的效果，其他效果请到官方查看

关闭菜单还有一种方式，就是点击菜单外面，所以为了增加这个事件需要以下代码

mui('body').on('tap','.mui-content',function(){
 	if(mui('.mui-off-canvas-wrap').offCanvas().isShown())
 	{
 	mui('.mui-off-canvas-wrap').offCanvas().close(); 
 	}
 	
 })

因为绑定的是mui-content,官方介绍中建议把头部和底部导航之类的部分放在content外面，其他内容放在里面，所以以上的绑定mui-content 触摸事件可能会导致在菜单隐藏时候，都会执行菜单隐藏代码，为此需要加一个判断，判断菜单是否为显示状态，isShown()，否则在菜单隐藏时点击里面的内容会报错，Uncaught TypeError: Cannot read property 'offsetWidth' of null