Hbuilder開發APP(二)——側滑菜單（webview模式）

mui提供了兩種側滑導航實現：webview模式和div模式，兩種模式各有優劣，適用於不同的場景。
今天我們來說下webview模式
主頁面和菜單內容在不同的webview中，兩個頁面根據內容需求分別組織DOM結構，mui對其DOM結構無特殊要求，故其有如下優點：
（1）菜單內容是單獨的webview，故可被多個頁面複用；
（2）菜單內容在單獨的webview中，菜單區域的滾動不影響主界面，故可使用原生滾動，滾動更爲流暢；
另一方面，webview模式也有其缺點：
（1）不支持拖動手勢（跟手拖動）；
（2）主頁面、菜單不同webview實現，因此若需交互（如：點擊菜單觸發主頁面內容變化），需使用自定義事件實現跨webview通訊；
側滑菜單頁面代碼：


這裏面主要是獲取一個主窗體對象，然後好使用MUI的自定義事件來得到index.html 裏面的關閉側滑業務部事件
再看下index.html頁面js：





這個裏面是首先在mui.plusredy裏面對側滑頁面menu進行了預加載的，同時，獲取menu.html窗體對象給開始定義的menu，然後對menu進行操作，設置width zindex bounce 。其中 zindex的值要小於0，爲什麼呢，當你創建的時候子頁面的zindex一般都是0，除非你創建子頁面的時候去進行設置了的。這點可以參見社區裏面的說法。然後就是index.html窗體對象給main，同上，設定main的屬性。然後就是打開側滑和關閉側滑的業務了。注意哦，你要實現在展開側滑後，右邊的蒙版區域進行點擊關閉就得在main獲取到主窗體對象後進行makclick事件監聽，這個是對你在menu和main裏進行的蒙版進行的蒙版區域的點擊事件監聽。