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


Posted in Javascript onJanuary 25, 2018

在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="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="external nofollow" 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>

以上这篇MUI 实现侧滑菜单及其主体部分上下滑动的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 中{},[]中括号,大括号使用详解
May 12 Javascript
JS模板实现方法
Apr 03 Javascript
jQuery的缓存机制浅析
Jun 07 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
Sep 22 Javascript
对象转换为原始值的实现方法
Jun 06 Javascript
Javascript中内建函数reduce的应用详解
Oct 20 Javascript
angular.js实现购物车功能
Oct 23 Javascript
详解性能更优越的小程序图片懒加载方式
Jul 18 Javascript
javascript获取元素的计算样式
May 24 Javascript
VsCode与Node.js知识点详解
Sep 05 Javascript
axios实现文件上传并获取进度
Mar 25 Javascript
js实现内置计时器
Dec 16 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
Jan 25 #Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
Jan 25 #Javascript
mui框架 页面无法滚动的解决方法(推荐)
Jan 25 #Javascript
vue使用 better-scroll的参数和方法详解
Jan 25 #Javascript
Vue cli+mui 区域滚动的实例代码
Jan 25 #Javascript
基于vue开发的在线付费课程应用过程
Jan 25 #Javascript
基于vue 开发中出现警告问题去除方法
Jan 25 #Javascript
You might like
解析php中的fopen()函数用打开文件模式说明
2013/06/20 PHP
Mootools 1.2教程 排序类和方法简介
2009/09/15 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
2013/01/27 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
2013/05/06 Javascript
JavaScript访问CSS属性的几种方式介绍
2014/07/21 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
JavaScript设计模式之建造者模式介绍
2014/12/28 Javascript
学习JavaScript设计模式之状态模式
2016/01/08 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
2016/07/05 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
2016/07/20 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
2016/08/24 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
2016/09/01 Javascript
深入学习jQuery中的data()
2016/12/22 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
2017/01/19 Javascript
nodejs学习笔记之路由
2017/03/27 NodeJs
JS模拟实现哈希表及应用详解
2018/05/04 Javascript
JQuery事件委托原理与用法实例分析
2019/05/13 jQuery
JS回调函数简单易懂的入门实例分析
2019/09/29 Javascript
node.js开发辅助工具nodemon安装与配置详解
2020/02/06 Javascript
微信小程序 获取手机号 JavaScript解密示例代码详解
2020/05/14 Javascript
Vue 请求传公共参数的操作
2020/07/31 Javascript
原生js实现下拉框选择组件
2021/01/20 Javascript
Python tempfile模块学习笔记(临时文件)
2014/05/25 Python
python中字典dict常用操作方法实例总结
2015/04/04 Python
Python数据结构之顺序表的实现代码示例
2017/11/15 Python
Python使用wget实现下载网络文件功能示例
2018/05/31 Python
Python网络爬虫四大选择器用法原理总结
2020/06/01 Python
美国购车网站:TrueCar
2016/10/19 全球购物
List, Set, Map是否继承自Collection接口?
2016/05/16 面试题
日语系毕业生推荐信
2013/11/11 职场文书
教师自我评价范文
2013/12/16 职场文书
2014年党的群众路线整改措施思想汇报
2014/10/12 职场文书
个人务虚会发言材料
2014/10/20 职场文书
戒赌保证书
2015/05/11 职场文书
门球健将观后感
2015/06/16 职场文书
Python中三种花式打印的示例详解
2022/03/19 Python