在mui文档的侧滑菜单介绍里没有说明如何实现侧滑,而mui侧滑菜单默认是没有上下滑动功能的,需要激活。本文主要为大家分享一篇mui 实现侧滑菜单及其主体部分上下滑动的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧,希望能帮助到大家。
1、首先在 class="mui-scroll-wrapper" 的元素上添加ID:
<!-- 侧滑导航根容器 --> <p> <!-- 菜单容器 --> <aside> <p> </p> <p> <!-- 菜单具体展示内容 --> ... </p> </aside></p> <!-- 主页面容器 --> <p> <!-- 主页面标题 --> <header> <a></a> <h1>标题</h1> </header> </p><p> </p><p> <!-- 主界面具体展示内容 --> ... </p>
从上面例子可以看出,侧滑菜单和主体部分都添加了ID。
分别为:offCanvasSideScroll、offCanvasContentScroll
2、其次在JS里面激活:
mui('#offCanvasSideScroll').scroll(); mui('#offCanvasContentScroll').scroll();
大功告成,现在超过高度即可进行下滑了。注意是超过高度!就像浏览器一样,如果“ 主界面具体展示内容”没有超出范围,是没有下滑功能的。
MUI:MUI 侧滑菜单。
完整代码:
nbsp;html> <meta> <meta> <title></title> <script></script> <link> <script></script> <style> body{ background-color: #000000; } .mui-off-canvas-wrap{ max-width: 720px; margin: 0 auto; } </style><!-- 侧滑导航根容器 --> <p> <!-- 菜单容器 --> <aside> <p> </p> <p> <!-- 菜单具体展示内容 --> </p> <p> </p> </aside></p> <!-- 主页面容器 --> <p> <!-- 主页面标题 --> <header> <a></a> <h1>标题</h1> </header> </p><p> </p><p> <!-- 主界面具体展示内容 --> </p><p> </p> <script> $("#left-menu").on('tap', function (event) { mui('.mui-off-canvas-wrap').offCanvas('show'); }); window.onload = function(){ mui('#offCanvasSideScroll').scroll(); mui('#offCanvasContentScroll').scroll(); } </script>
相关推荐:
CSS3模拟侧滑菜单_html/css_WEB-ITnose
CSS3手机端侧滑菜单 4种滑动菜单特效_html/css_WEB-ITnose
CSS3仿SF Android版的侧滑菜单_html/css_WEB-ITnose
以上就是MUI实现侧滑菜单效果的详细内容,更多请关注php中文网其它相关文章!
Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号