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結構。 動畫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> ~~~ 動畫2：主界面不動、菜單移動 該種動畫要求的DOM結構和動畫1的DOM結構基本相同，唯一差別就是需在側滑導航根容器class上增加一個mui-slide-in類 動畫3：主界面、菜單同時移動 該種動畫要求的DOM結構較特殊，需將菜單容器放在主頁面容器之下 ~~~ <!-- 側滑導航根容器 --> <div class="mui-off-canvas-wrap mui-draggable"> <!-- 主頁面容器 --> <div class="mui-inner-wrap"> <!-- 菜單容器 --> <aside class="mui-off-canvas-left"> <div class="mui-scroll-wrapper"> <div class="mui-scroll"> <!-- 菜單具體展示內容 --> ... </div> </div> </aside> <!-- 主頁面標題 --> <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支持多種方式顯示div模式的側滑菜單：1、在主界面向右拖動（drag）；2、點擊含有mui-action-menu類的控件；3、Android手機按menu鍵；4、通過JS API觸發，如下： ~~~ mui('.mui-off-canvas-wrap').offCanvas('show'); ~~~ 同樣，mui支持多種方式關閉div模式的側滑菜單：1、在手機屏幕上任意位置向左拖動（drag）；2、點擊主界面內任意位置；3、Android手機按menu鍵；4、Android手機按back鍵；5、通過JS API觸發，如下： ~~~ mui('.mui-off-canvas-wrap').offCanvas('close'); ~~~