在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 侧滑菜单。
完整代码:
-
-
<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>
很好用,把引用文件换成自己本地的,可以测试下。
感谢原创。