在mui文档的侧滑菜单介绍里没有说明如何实现侧滑，而mui侧滑菜单默认是没有上下滑动功能的，需要激活。本文主要为大家分享一篇mui 实现侧滑菜单及其主体部分上下滑动的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧，希望能帮助到大家。
1、首先在 class=”mui-scroll-wrapper” 的元素上添加ID：
标题
...
登录后复制
从上面例子可以看出，侧滑菜单和主体部分都添加了ID。
分别为：offCanvasSideScroll、offCanvasContentScroll
2、其次在JS里面激活：
mui('#offCanvasSideScroll').scroll(); mui('#offCanvasContentScroll').scroll();
登录后复制
大功告成，现在超过高度即可进行下滑了。注意是超过高度！就像浏览器一样，如果“ 主界面具体展示内容”没有超出范围，是没有下滑功能的。
MUI：MUI 侧滑菜单。
完整代码：
body{ background-color: #000000; } .mui-off-canvas-wrap{ max-width: 720px; margin: 0 auto; }
标题
$("#left-menu").on('tap', function (event) {mui('.mui-off-canvas-wrap').offCanvas('show');});window.onload = function(){ mui('#offCanvasSideScroll').scroll(); mui('#offCanvasContentScroll').scroll(); }
登录后复制
相关推荐：
CSS3模拟侧滑菜单_html/css_WEB-ITnose
CSS3手机端侧滑菜单 4种滑动菜单特效_html/css_WEB-ITnose
CSS3仿SF Android版的侧滑菜单_html/css_WEB-ITnose
以上就是MUI实现侧滑菜单效果的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2788704.html
