집 > 기사 > 웹 프론트엔드 > MUI는 측면 슬라이딩 메뉴 효과를 구현합니다.

MUI는 측면 슬라이딩 메뉴 효과를 구현합니다.

小云云원래의: 2018-01-27 09:47:513167검색

MUI 문서의 사이드 슬라이딩 메뉴 소개에는 사이드 슬라이딩 구현 방법이 설명되어 있지 않으며, MUI 사이드 슬라이딩 메뉴에는 기본적으로 상하 슬라이딩 기능이 없으므로 활성화해야 합니다. 이번 글은 주로 사이드 슬라이딩 메뉴를 구현하는 MUI의 방법과 그 주요 부분이 위아래로 슬라이드되는 내용을 공유하며, 참고할만한 가치가 있어 모든 분들께 도움이 되기를 바랍니다. 편집자를 따라가서 모두에게 도움이 되기를 바랍니다.

1. 먼저 class="mui-scroll-wrapper" 요소에 ID를 추가합니다.

<!-- 侧滑导航根容器 -->
<p class="mui-off-canvas-wrap mui-draggable">
 <!-- 菜单容器 -->
 <aside class="mui-off-canvas-left">
  <p id="offCanvasSideScroll" class="mui-scroll-wrapper">
   <p class="mui-scroll">
    <!-- 菜单具体展示内容 -->
    ...
   </p>
  </p>
 </aside>
 <!-- 主页面容器 -->
 <p 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>
  <p id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
   <p class="mui-scroll">
    <!-- 主界面具体展示内容 -->
    ...
   </p>
  </p> 
 </p>
</p>

위의 예에서 볼 수 있듯이 사이드 슬라이딩 메뉴와 메인 부분 모두에 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>
	<!-- 侧滑导航根容器 --> 
	<p class="mui-off-canvas-wrap mui-draggable"> 
	 <!-- 菜单容器 --> 
	 <aside class="mui-off-canvas-left"> 
	  <p id="offCanvasSideScroll" class="mui-scroll-wrapper"> 
	   <p class="mui-scroll"> 
	    <!-- 菜单具体展示内容 --> 
	    <p style="height:1000px">
	    	
	    </p>
	   </p> 
	  </p> 
	 </aside> 
	 <!-- 主页面容器 --> 
	 <p 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> 
	  <p id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper"> 
	   <p class="mui-scroll"> 
	    <!-- 主界面具体展示内容 --> 
	    <p style="height:1000px">
	    	
	    </p>
	   </p> 
	  </p>  
	 </p> 
	</p>
	
	<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는 측면 슬라이딩 메뉴 효과를 구현합니다.

관련 기사