相思资源网 Design By www.200059.com
在MUI文档的侧滑菜单介绍里没有说明如何实现侧滑，而MUI侧滑菜单默认是没有上下滑动功能的，需要激活。
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();
大功告成，现在超过高度即可进行下滑了。注意是超过高度！就像浏览器一样，如果“ 主界面具体展示内容”没有超出范围，是没有下滑功能的。
MUI：MUI 侧滑菜单。
完整代码：
<!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="/UploadFiles/2021-04-02/mui.min.js">以上这篇MUI 实现侧滑菜单及其主体部分上下滑动的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
标签：
MUI,侧滑菜单,上下,滑动
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com
暂无MUI 实现侧滑菜单及其主体部分上下滑动的方法的评论...