MUI 实现侧滑菜单及其主体部分上下滑动

在MUI文档的侧滑菜单介绍里没有说明如何实现侧滑,而MUI侧滑菜单默认是没有上下滑动功能的,需要激活。

1、首先在 class="mui-scroll-wrapper" 的元素上添加ID:

  1. <!-- 侧滑导航根容器 -->
  2. <div class="mui-off-canvas-wrap mui-draggable">
  3. <!-- 菜单容器 -->
  4. <aside class="mui-off-canvas-left">
  5. <div id="offCanvasSideScroll" class="mui-scroll-wrapper">
  6. <div class="mui-scroll">
  7. <!-- 菜单具体展示内容 -->
  8. ...
  9. </div>
  10. </div>
  11. </aside>
  12. <!-- 主页面容器 -->
  13. <div class="mui-inner-wrap">
  14. <!-- 主页面标题 -->
  15. <header class="mui-bar mui-bar-nav">
  16. <a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"> </a>
  17. <h1 class="mui-title">标题 </h1>
  18. </header>
  19. <div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
  20. <div class="mui-scroll">
  21. <!-- 主界面具体展示内容 -->
  22. ...
  23. </div>
  24. </div>
  25. </div>
  26. </div>

从上面例子可以看出,侧滑菜单和主体部分都添加了ID。

分别为:offCanvasSideScroll、offCanvasContentScroll

2、其次在JS里面激活:

  1. mui( '#offCanvasSideScroll').scroll();
  2. mui( '#offCanvasContentScroll').scroll();

大功告成,现在超过高度即可进行下滑了。注意是超过高度!就像浏览器一样,如果“ 主界面具体展示内容”没有超出范围,是没有下滑功能的。

MUI:MUI 侧滑菜单

完整代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  6. <title> </title>
  7. <script src="http://dev.dcloud.net.cn/mui/dist/js/mui.min.js"> </script>
  8. <link href="http://dev.dcloud.net.cn/mui/dist/css/mui.min.css" rel="stylesheet"/>
  9. <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"> </script>
  10. <style type="text/css">
  11. body{
  12. background-color: #000000;
  13. }
  14. .mui-off-canvas-wrap{
  15. max-width: 720px;
  16. margin: 0 auto;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <!-- 侧滑导航根容器 -->
  22. <div class="mui-off-canvas-wrap mui-draggable">
  23. <!-- 菜单容器 -->
  24. <aside class="mui-off-canvas-left">
  25. <div id="offCanvasSideScroll" class="mui-scroll-wrapper">
  26. <div class="mui-scroll">
  27. <!-- 菜单具体展示内容 -->
  28. <div style="height:1000px">
  29. </div>
  30. </div>
  31. </div>
  32. </aside>
  33. <!-- 主页面容器 -->
  34. <div class="mui-inner-wrap">
  35. <!-- 主页面标题 -->
  36. <header class="mui-bar mui-bar-nav">
  37. <a id="left-menu" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"> </a>
  38. <h1 class="mui-title">标题 </h1>
  39. </header>
  40. <div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
  41. <div class="mui-scroll">
  42. <!-- 主界面具体展示内容 -->
  43. <div style="height:1000px">
  44. </div>
  45. </div>
  46. </div>
  47. </div>
  48. </div>
  49. <script type="text/javascript" charset="utf-8">
  50. $( "#left-menu").on( 'tap', function (event) {
  51. mui( '.mui-off-canvas-wrap').offCanvas( 'show');
  52. });
  53. window.onload = function(){
  54. mui( '#offCanvasSideScroll').scroll();
  55. mui( '#offCanvasContentScroll').scroll();
  56. }
  57. </script>
  58. </body>
  59. </html>

很好用,把引用文件换成自己本地的,可以测试下。

感谢原创。

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值