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 相关文章推荐
jQuery EasyUI API 中文文档 - Pagination分页
Sep 29 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
Nov 13 Javascript
深入理解JavaScript是如何实现继承的
Dec 12 Javascript
当jQuery1.7遇上focus方法的问题
Jan 26 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
Mar 10 Javascript
快速学习AngularJs HTTP响应拦截器
Dec 31 Javascript
原生javascript 学习之js变量全面了解
Jul 14 Javascript
Bootstrap源码解读排版(1)
Dec 23 Javascript
ES6中Math对象新增的方法实例详解
Apr 25 Javascript
Vue-Cli中自定义过滤器的实现代码
Aug 12 Javascript
Bootstrap Table 搜索框和查询功能
Nov 30 Javascript
JS使用setInterval计时器实现挑战10秒
Nov 08 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
制作美丽的拉花
2021/03/03 冲泡冲煮
开发大型PHP项目的方法
2006/10/09 PHP
php读取文件内容至字符串中,同时去除换行、空行、行首行尾空格(Zjmainstay原创)
2012/07/31 PHP
php中的单引号、双引号和转义字符详解
2017/02/16 PHP
PHP设计模式之简单工厂和工厂模式实例分析
2019/03/25 PHP
jQuery 学习第六课 实现一个Ajax的TreeView
2010/05/17 Javascript
javascript instanceof 内部机制探析
2010/10/15 Javascript
工作中常用到的JS表单验证代码(包括例子)
2010/11/11 Javascript
基于Jquery制作的幻灯片图集效果打包下载
2011/02/12 Javascript
javascript中match函数的用法小结
2014/02/08 Javascript
分享使用AngularJS创建应用的5个框架
2015/12/05 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
2016/01/06 Javascript
web 前端常用组件之Layer弹出层组件
2016/09/22 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
2017/07/03 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
2017/07/10 Javascript
Bootstrap与Angularjs的模态框实例代码
2017/08/03 Javascript
node 利用进程通信实现Cluster共享内存
2017/10/27 Javascript
模块化react-router配置方法详解
2019/06/03 Javascript
javascript开发实现贪吃蛇游戏
2020/07/31 Javascript
零基础写python爬虫之打包生成exe文件
2014/11/06 Python
python3之微信文章爬虫实例讲解
2017/07/12 Python
python3设计模式之简单工厂模式
2017/10/17 Python
python中的随机函数小结
2018/01/27 Python
python提取图像的名字*.jpg到txt文本的方法
2018/05/10 Python
Python实现K折交叉验证法的方法步骤
2019/07/11 Python
Django之编辑时根据条件跳转回原页面的方法
2019/08/21 Python
使用Django和Postgres进行全文搜索的实例代码
2020/02/13 Python
EMPHASIS艾斐诗官网:周生生旗下原创精品珠宝品牌
2020/12/17 全球购物
关于Java String的一道面试题
2013/09/29 面试题
公司业务主管岗位职责
2013/12/07 职场文书
知识竞赛活动方案
2014/02/18 职场文书
《假如》教学反思
2014/04/17 职场文书
计生专干事迹
2014/05/28 职场文书
民族学专业职业生涯规划范文:积跬步以至千里
2014/09/11 职场文书
解除劳动合同通知书范本
2015/04/16 职场文书
SQL中的三种去重方法小结
2021/11/01 SQL Server