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