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中Td的值(定义td的单击事件)
Jan 10 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
Mar 05 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
Dec 13 Javascript
JavaScript实战之菜单特效
Aug 16 Javascript
javascript基础知识之html5轮播图实例讲解(44)
Feb 17 Javascript
基于AGS JS开发自定义贴图图层
Mar 31 Javascript
Echarts基本用法_动力节点Java学院整理
Aug 11 Javascript
微信小程序实现全局搜索代码高亮的示例
Mar 30 Javascript
vue.js使用3DES加密的方法示例
May 18 Javascript
vue列表单项展开收缩功能之this.$refs的详解
May 05 Javascript
微信小程序列表时间戳转换实现过程解析
Oct 12 Javascript
prettier自动格式化去换行的实现代码
Aug 25 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 include的妙用,实现路径加密
2008/07/29 PHP
ThinkPHP处理Ajax返回的方法
2014/11/22 PHP
javascript继承之为什么要继承
2012/11/10 Javascript
Javascript Objects详解
2014/09/04 Javascript
node.js中的buffer.length方法使用说明
2014/12/14 Javascript
JavaScript中继承用法实例分析
2015/05/16 Javascript
利用JavaScript脚本实现滚屏效果的方法
2015/07/07 Javascript
JavaScript中关联原型链属性特性
2016/02/13 Javascript
jQuery validate验证插件使用详解
2016/05/11 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
2016/06/03 Javascript
Bootstarp 基础教程之表单部分实例代码
2017/02/03 Javascript
js 性能优化之算法和流程控制
2017/02/15 Javascript
JavaScript控制浏览器全屏显示简单示例
2018/07/05 Javascript
JS基于ES6新特性async await进行异步处理操作示例
2019/02/02 Javascript
swiper实现异形轮播效果
2019/11/28 Javascript
vue常用高阶函数及综合实例
2021/02/25 Vue.js
[46:27]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第一局
2016/03/02 DOTA
python使用socket进行简单网络连接的方法
2015/04/29 Python
在Django中同时使用多个配置文件的方法
2015/07/22 Python
独特的python循环语句
2016/11/20 Python
Python实现的概率分布运算操作示例
2017/08/14 Python
python scrapy重复执行实现代码详解
2019/12/28 Python
Pytorch之卷积层的使用详解
2019/12/31 Python
python如何通过闭包实现计算器的功能
2020/02/22 Python
python中threading开启关闭线程操作
2020/05/02 Python
澳大利亚领先的在线葡萄酒零售商:Get Wines Direct
2018/03/27 全球购物
Dockers鞋官网:Dockers Shoes
2018/11/13 全球购物
助学金感谢信
2015/01/20 职场文书
体育教师个人工作总结
2015/02/09 职场文书
刑事法律意见书
2015/06/04 职场文书
网吧管理制度范本
2015/08/05 职场文书
教师廉政准则心得体会
2016/01/20 职场文书
初一数学教学反思
2016/02/17 职场文书
2016春季运动会开幕词
2016/03/04 职场文书
Python读写yaml文件
2022/03/20 Python
win11无线投屏在哪设置? win11无线投屏功能的使用方法
2022/04/08 数码科技