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 相关文章推荐
JavaScript 利用StringBuffer类提升+=拼接字符串效率
Nov 24 Javascript
jQuery 数据缓存模块进化史详细介绍
Nov 19 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
Oct 09 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
Jan 31 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
Mar 28 Javascript
浅谈使用MVC模式进行JavaScript程序开发
Nov 10 Javascript
vue.js中实现登录控制的方法示例
Apr 23 Javascript
使用vue-router完成简单导航功能【推荐】
Jun 28 Javascript
Vue移动端实现图片上传及超过1M压缩上传
Dec 23 Javascript
vue+canvas实现拼图小游戏
Sep 18 Javascript
OpenLayers加载缩放控件使用方法详解
Sep 25 Javascript
jquery实现点击左右按钮切换图片
Jan 27 jQuery
完美解决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
CI框架中libraries,helpers,hooks文件夹详细说明
2014/06/10 PHP
php邮件发送的两种方式
2020/04/28 PHP
WordPress迁移时一些常见问题的解决方法整理
2015/11/24 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
Phpstorm+Xdebug断点调试PHP的方法
2018/05/14 PHP
Laravel学习笔记之Artisan命令生成自定义模板的方法
2018/11/22 PHP
yii框架使用分页的方法分析
2019/07/25 PHP
MooTools 1.2介绍
2009/09/14 Javascript
Javascript中获取出错代码所在文件及行数的代码
2010/09/23 Javascript
jQuery实现连续动画效果实例分析
2015/10/09 Javascript
给easyui的datebox控件添加清空按钮的实现方法
2016/11/09 Javascript
如何使用angularJs
2017/05/08 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
2017/05/25 Javascript
微信小程序 循环及嵌套循环的使用总结
2017/09/26 Javascript
Node实战之不同环境下配置文件使用教程
2018/01/02 Javascript
vue项目打包后打开页面空白解决办法
2018/06/29 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
2018/08/27 Javascript
VUE组件中的 Drawer 抽屉实现代码
2019/08/06 Javascript
python正则表达式match和search用法实例
2015/03/26 Python
Python的自动化部署模块Fabric的安装及使用指南
2016/01/19 Python
Python函数中*args和**kwargs来传递变长参数的用法
2016/01/26 Python
从局部变量和全局变量开始全面解析Python中变量的作用域
2016/06/16 Python
Python实现全角半角字符互转的方法
2016/11/28 Python
python 换位密码算法的实例详解
2017/07/19 Python
Python编程argparse入门浅析
2018/02/07 Python
Python生成器定义与简单用法实例分析
2018/04/30 Python
详解python算法之冒泡排序
2019/03/05 Python
Django重设Admin密码过程解析
2020/02/10 Python
使用AJAX和Django获取数据的方法实例
2020/10/25 Python
纯CSS3实现手风琴风格菜单具体步骤
2013/05/06 HTML / CSS
在HTML5中如何使用CSS建立不可选的文字
2014/10/17 HTML / CSS
萨克斯第五大道的折扣店:Saks Fifth Avenue OFF 5TH
2016/08/25 全球购物
大学毕业自我鉴定范文
2014/02/03 职场文书
总账会计岗位职责
2014/03/13 职场文书
寒暑假实习证明书模板
2014/11/29 职场文书
搞笑老公保证书
2015/02/26 职场文书