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遍历 table的脚本
Jul 23 Javascript
vs2003 js文件编码问题的解决方法
Mar 20 Javascript
理解Javascript_06_理解对象的创建过程
Oct 15 Javascript
qTip2 精致的基于jQuery提示信息插件
Feb 17 Javascript
JS实现DIV容器赋值的方法
Dec 14 Javascript
Javascript技术栈中的四种依赖注入详解
Feb 23 Javascript
实例讲解jQuery中对事件的命名空间的运用
May 24 Javascript
使用Script元素发送JSONP请求的方法
Jun 12 Javascript
原生js实现中奖信息无间隙滚动效果
Jan 18 Javascript
js正则相关知识点专题
May 10 Javascript
vue项目打包后怎样优雅的解决跨域
May 26 Javascript
微信小程序实现圆形进度条动画
Nov 18 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代码质量36计
2012/09/05 PHP
php引用返回与取消引用的详解
2013/06/08 PHP
ThinkPHP处理Ajax返回的方法
2014/11/22 PHP
Symfony页面的基本创建实例详解
2015/01/26 PHP
PHP自动生成表单代码分享
2015/06/19 PHP
PHP explode()函数的几个应用和implode()函数有什么区别
2015/11/05 PHP
ThinkPHP框架整合微信支付之JSAPI模式图文详解
2019/04/09 PHP
php求斐波那契数的两种实现方式【递归与递推】
2019/09/09 PHP
PHPstorm激活码2020年5月13日亲测有效
2020/09/17 PHP
[原创]网络复制内容时常用的正则+editplus
2006/11/30 Javascript
IE与Firefox下javascript getyear年份的兼容性写法
2007/12/20 Javascript
javascript 当前日期加(天、周、月、年)
2009/08/09 Javascript
DIV始终居中的js代码
2014/02/17 Javascript
jquery自动补齐功能插件flexselect用法示例
2016/08/06 Javascript
纯css下拉菜单 无需js
2016/08/15 Javascript
Node.js中的require.resolve方法使用简介
2017/04/23 Javascript
JS实现弹出下载对话框及常见文件类型的下载
2017/07/13 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
node创建Vue项目步骤详解
2020/03/06 Javascript
实例讲解React 组件生命周期
2020/07/08 Javascript
Python中用于去除空格的三个函数的使用小结
2015/04/07 Python
利用PyInstaller将python程序.py转为.exe的方法详解
2017/05/03 Python
解决yum对python依赖版本问题
2019/07/05 Python
深入了解Django View(视图系统)
2019/07/23 Python
python 进制转换 int、bin、oct、hex的原理
2021/01/13 Python
canvas 阴影和图形变换的示例代码
2018/01/02 HTML / CSS
毕业生求职自荐信怎么写
2014/01/08 职场文书
自我介绍演讲稿
2014/01/15 职场文书
小学毕业感言150字
2014/02/05 职场文书
《鸟岛》教学反思
2014/04/26 职场文书
社团活动总结模板
2014/06/30 职场文书
2014国庆节演讲稿:祖国在我心中(400字)
2014/09/25 职场文书
2014年组织委员工作总结
2014/12/01 职场文书
销售内勤岗位职责范本
2015/04/13 职场文书
2016年记者节感言
2015/12/08 职场文书
KVM基础命令详解
2022/04/30 Servers