首页 > 代码库 > mui 中侧滑菜单

mui 中侧滑菜单

侧滑导航

mui提供了两种侧滑导航实现:webview模式和div模式,两种模式各有优劣,适用于不同的场景。

webview模式

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

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

另一方面,webview模式也有其缺点:

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

div模式

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

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

另一方面,div模式也有其缺点:

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

div模式支持不同的动画效果,每种动画效果需遵从不同的DOM构造;下面我们以右滑菜单为例(左滑菜单仅需将菜单父节点上的mui-off-canvas-left换成mui-off-canvas-right即可),说明每种动画对应的DOM结构。

<!--侧滑菜单容器-->
<div id="Main" class="mui-off-canvas-wrap mui-draggable">  

    <!--菜单部分-->
    <aside id="offCanvasSide" class="mui-off-canvas-right">    
        <div id="offCanvasSideScroll" class="mui-scroll-wrapper">            
            <button id="offCanvasHide" type="button" >关闭侧滑菜单</button>        
        </div>
    </aside>

    <!-- 主界面 -->
    <div class="mui-inner-wrap">
        <div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
            <button id="offCanvasShow" type="button" >显示侧滑菜单</button>
        </div>
        <!-- 这个东西不能删,利用他还原界面 -->
        <div class="mui-off-canvas-backdrop"></div>
    </div>
    
</div>

动画效果

主界面移动,菜单不动 默认

菜单移动,主界面不动 mui-slide-in

QQ式移动 mui-scalable

mui 中侧滑菜单