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

在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 实现侧滑菜单及其主体部分上下滑动的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

  • js+html5实现侧滑页面效果
  • 完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
赞 (0)

相关推荐

  • 完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题

    mui框架中off-canvas侧滑的一个缺点就是无法出现滚动条,因为它主要用途是设置类似于qq界面的那种格局,所以才无法滚动.那么如何解决这个问题呢? 解决方法: 一.在内容容器加上id,然后通过JS控制 <div class="mui-content mui-scroll-wrapper" id="scr1"> JS部分 <script> mui('#scr1').scroll(); </script> 二.利用创建子页面的方

  • js+html5实现侧滑页面效果

    js+html5实现侧滑页面效果

    本文实例为大家分享了html5实现侧滑页面效果展示的具体代码,供大家参考,具体内容如下 before: after: 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maxim

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

    在MUI文档的侧滑菜单介绍里没有说明如何实现侧滑,而MUI侧滑菜单默认是没有上下滑动功能的,需要激活. 1.首先在 class="mui-scroll-wrapper" 的元素上添加ID: <!-- 侧滑导航根容器 --> <div class="mui-off-canvas-wrap mui-draggable"> <!-- 菜单容器 --> <aside class="mui-off-canvas-left&q

  • Android自定义控件案例汇总2（自定义开关、下拉刷新、侧滑菜单）

    案例四 自定义开关: 功能介绍:本案例实现的功能是创建一个自定义的开关,可以自行决定开关的背景.当滑动开关时,开关的滑块可跟随手指移动.当手指松开后,滑块根据开关的状态,滑到最右边或者滑到最左边,同时保存开关的状态,将开关的状态回调给调用者.当然,上述功能系统给定的switch控件也可以实现. 实现步骤: 1. 写一个类继承view,重写两个参数的构造方法.在构造方法中指定工作空间,通过attrs.getAttributeResourceValue方法将java代码中的属性值和xml中的属性值联

  • android RecyclerView侧滑菜单，滑动删除，长按拖拽，下拉刷新上拉加载

    android RecyclerView侧滑菜单，滑动删除，长按拖拽，下拉刷新上拉加载

    本文介绍的库中的侧滑效果借鉴自SwipeMenu,并对SipwMenu的源码做了修改与Bug修复,然后才开发出的SwipeRecyclerView. 需要说明的是,本库没有对RecyclerView做大的修改,只是ItemView的封装.看起来是对RecyclerView的修改,其实仅仅是为RecyclerView添加了使用的方法API而已. 本库已经更新了三个版本了,会一直维护下去,根据小伙伴的要求,以后也会添加一些其它功能. SwipeRecyclerView将完美解决这些问题: 以下功能全

  • vue+swiper实现侧滑菜单效果

    vue+swiper实现侧滑菜单效果

    本文实例为大家分享了vue swiper实现侧滑菜单效果的具体代码,供大家参考,具体内容如下 先上效果图: 这个左右滑动以及上下滑动主要使用了Swiper的轮播功能,首先是该自定义组件的代码: <template> <div class="s-slider"> <swiper :options="horizontalSwiperOptions" ref="horizontalSwiper"> <swipe

  • 基于Python实现MUI侧滑菜单a标签跳转

    基于Python实现MUI侧滑菜单a标签跳转

    目录 1.前言 2.问题描述 3.解决方案 4.结语 本文转自微信公众号:"算法与编程之美" 1.前言 侧滑是一个非常实用的选项组件,它在Android App应用中非常广泛,常见的场景有:下拉刷新,侧滑抽屉,侧滑删除,侧滑返回以及侧滑菜单等.就是因为侧滑应用太过于广泛,它所带来的问题也是应接不暇. 2.问题描述 在实际操作过程中,实现侧滑菜单带来了那么一个问题,侧滑菜单已经实现,但是侧滑导航的子选项卡里的内容要如何实现跳转,通常想到的办法便是建立<a>标签选项卡进行her

  • Android中DrawerLayout实现侧滑菜单效果

    Android中DrawerLayout实现侧滑菜单效果

    众所周知,android里面我们很熟悉的一个功能,侧滑菜单效果在以前我们大部分都是用的slidingmenu这个开源框架,自从谷歌官方新出的一个DrawerLayout控件之后,越来越多的应用开始使用谷歌的官方的控件写这个效果了. 话不多说,先来发图以表我滴诚意: 开始写代码 DrawerLayout 是v4包里面的,所以项目里面需要添加v4包,具体怎么添加就不多说了, NavigationView需要在build.gradle里面添加compile 'com.android.support:d

  • Android Drawerlayout实现侧滑菜单效果

    本文实例为大家分享了Drawerlayout侧滑菜单的具体代码,供大家参考,具体内容如下 1.Drawerlayout的xml布局 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.and

  • iOS中仿QQ侧滑菜单功能

    iOS中仿QQ侧滑菜单功能

    UITabBarController做QQ侧滑菜单效果: 首先要了解UITabBarController的层级结构: UITabBarController加载的其它UIViewController的View都是被添加在UITransitionView上(这是一个私有API),UITransitionView在self.view的0层,UITabBar在的第一层. 所以我的思路是这样的: UITransitionView与UITabBar转移到一个新的View1上去,作为滑动的部分: 在View1

  • Swift项目中利用SWRevealViewController实现侧滑菜单

    Swift项目中利用SWRevealViewController实现侧滑菜单

    像往常一样,我们还是创建一个Demo App 来展示一下具体如何使用SWRevealViewController.这个Demo 很简单,功能上也不完善,主要的目的只是引导你去了解如何实现侧滑菜单. 我们将要实现的侧滑菜单大概是这个样子的: 用户可以单击左上角的列表按钮来显示侧滑菜单 用户也可以右滑内容视图来显示侧滑菜单 侧滑菜单显示的时候,用户可以再次单击列表按钮来关闭它 用户也可以左滑内容区域来关闭它 新建一个 Xcode 项目 这篇文章的主要目的是讲解侧滑菜单的实现,所以为了节省你的时间,你

  • Android自定义View 仿QQ侧滑菜单的实现代码

    Android自定义View 仿QQ侧滑菜单的实现代码

    先看看QQ的侧滑效果 分析一下 先上原理图(不知道能否表达的清楚 ==) -首先这里使用了 Android 的HorizontalScrollView 水平滑动布局作为容器,当然我们需要继承它自定义一个侧滑视图 - 这个容器里面有一个父布局(一般用LinerLayout,本demo用的是),这个父布局里面有且只有两个子控件(布局),初始状态菜单页的位置在Y轴上存在偏移这样可以就可以形成主页叠在菜单页的上方的视觉效果:然后在滑动的过程程中 逐渐修正偏移,最后菜单页和主页并排排列.原理搞清了实现起来

随机推荐