> 웹 프론트엔드 > JS 튜토리얼 > MUI에서 사이드 슬라이딩 메뉴를 구현하는 방법

MUI에서 사이드 슬라이딩 메뉴를 구현하는 방법

亚连
풀어 주다: 2018-06-09 15:42:32
원래의
2625명이 탐색했습니다.

아래에서는 사이드 슬라이딩 메뉴와 그 주요 부분을 위아래로 슬라이드하는 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(&#39;#offCanvasSideScroll&#39;).scroll(); 
mui(&#39;#offCanvasContentScroll&#39;).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(&#39;tap&#39;, function (event) {
			mui(&#39;.mui-off-canvas-wrap&#39;).offCanvas(&#39;show&#39;);
		});
		
		window.onload = function(){
	   	mui(&#39;#offCanvasSideScroll&#39;).scroll(); 
			mui(&#39;#offCanvasContentScroll&#39;).scroll(); 
		}
  </script>
</body>
</html>
로그인 후 복사

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

JS에서 두 변수 값의 교환 방법을 구현하는 방법

Vue에서 사용자 정의 명령을 구현하는 방법은 무엇입니까?

Vue에서 상위 구성 요소를 통해 하위 구성 요소의 스타일을 수정하는 방법

위 내용은 MUI에서 사이드 슬라이딩 메뉴를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿