MUI implémente l'effet de menu coulissant latéral-js tutoriel-php.cn

MUI implémente l'effet de menu coulissant latéral

小云云

Libérer： 2018-01-27 09:47:51

original

3176 Les gens l'ont consulté

L'introduction du menu coulissant latéral dans le document MUI n'explique pas comment implémenter le menu coulissant latéral. Le menu coulissant latéral MUI n'a pas la fonction coulissante haut et bas par défaut et doit être activé. Cet article partage principalement avec vous une méthode de MUI pour implémenter un menu coulissant latéral et sa partie principale pour glisser de haut en bas. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

1. Ajoutez d'abord l'ID à l'élément avec class="mui-scroll-wrapper":

<!-- 侧滑导航根容器 -->
<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>

Copier après la connexion

Comme le montre l'exemple ci-dessus, le glissement latéral Le menu et les identifiants des pièces principales ont été ajoutés.

sont : offCanvasSideScroll, offCanvasContentScroll

2. Deuxièmement, activez-le dans JS :

mui('#offCanvasSideScroll').scroll(); 
mui('#offCanvasContentScroll').scroll();

Copier après la connexion

Vous avez terminé. Vous pouvez maintenant glisser vers le bas après avoir dépassé la hauteur. A noter qu'il est au dessus de la hauteur ! Tout comme un navigateur, si le « contenu d'affichage spécifique de l'interface principale » ne dépasse pas la portée, il n'y a pas de fonction coulissante.

MUI : menu coulissant MUI.

Code complet :

<!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>

Copier après la connexion

Recommandations associées :

Menu coulissant latéral simulé CSS3_html/css_WEB-ITnose

Menu coulissant latéral mobile CSS3 4 types d'effets spéciaux de menu coulissant_html/css_WEB-ITnose

CSS3 imitation SF Version Android du menu coulissant latéral_html/css_WEB-ITnose

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!