利用mui開發APP
之側滑菜單主內容滾動問題
MUI作為開發者常用的框架之一，其號稱最接近原生APP體驗的高性能前端框架。因此利用mui開發移動APP，可以為開發者提供很大的便利和接近原生的體驗。但是，在實現一些復雜功能的過程中，難免遇到一些小問題。博主將以自己在項目開發中的一些的經驗，陸續對mui使用中容易遇到的小問題，予以解答和分享，希望能幫到更多的開發者朋友。
最近，博主在項目開發過程中遇到這樣一個問題，即利用mui側滑菜單模塊，實現APP的側滑菜單效果時，側滑菜單加入以后，將影響自身及主頁面內容的上下滑動。
相信這個問題在用mui開發APP時遇到的人不在少數，已解決，敬請參考。
1、首先在 class="mui-scroll-wrapper" 的元素上添加ID：
代碼如下：
<!-- 側滑導航根容器 --> <div class="mui-off-canvas-wrap mui-draggable"> <!-- 菜單容器 --> <aside class="mui-off-canvas-left"> <div id="offCanvasSideScroll" 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 id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper"> <div class="mui-scroll"> <!-- 主界面具體展示內容 --> ... </div> </div> </div> </div>
從上面例子可以看出，側滑菜單和主體部分都添加了ID。
分別為：offCanvasSideScroll、offCanvasContentScroll。
2、其次在JS里面激活：
注意！這是至關重要的一步操作：
mui('#offCanvasSideScroll').scroll();
mui('#offCanvasContentScroll').scroll();
經過JS的初始化以后，現在超過高度即可進行下滑了。注意是超過高度！就像瀏覽器一樣，如果“ 主界面具體展示內容”沒有超出范圍，是沒有下滑功能的。
完整代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <script src="http://dev.dcloud.net.cn/mui/dist/js/mui.min.js"></script> <link href="http://dev.dcloud.net.cn/mui/dist/css/mui.min.css" rel="stylesheet"/> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <style type="text/css"> body{ background-color: #000000; } .mui-off-canvas-wrap{ max-width: 720px; margin: 0 auto; } </style> </head> <body> <!-- 側滑導航根容器 --> <div class="mui-off-canvas-wrap mui-draggable"> <!-- 菜單容器 --> <aside class="mui-off-canvas-left"> <div id="offCanvasSideScroll" class="mui-scroll-wrapper"> <div class="mui-scroll"> <!-- 菜單具體展示內容 --> <div style="height:1000px"> </div> </div> </div> </aside> <!-- 主頁面容器 --> <div class="mui-inner-wrap"> <!-- 主頁面標題 --> <header class="mui-bar mui-bar-nav"> <a id="left-menu" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a> <h1 class="mui-title">標題</h1> </header> <div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper"> <div class="mui-scroll"> <!-- 主界面具體展示內容 --> <div style="height:1000px"> </div> </div> </div> </div> </div> <script type="text/javascript" charset="utf-8"> $("#left-menu").on('tap', function (event) { mui('.mui-off-canvas-wrap').offCanvas('show'); }); window.onload = function(){ mui('#offCanvasSideScroll').scroll(); mui('#offCanvasContentScroll').scroll(); } </script> </body> </html>
至此，mui側滑菜單主頁面內容的問題已解決，更多詳細內容，敬請關注 Q的前端世界。也可在評論區提出你的遇到的困難或更好建議。
本期分享就到這里，覺得內容不錯的小伙伴請點推薦，歡迎大家在評論下方評論區與博主互動，謝謝大家！