Maison >interface Web >js tutoriel >Comment implémenter le menu coulissant latéral dans MUI

Comment implémenter le menu coulissant latéral dans MUI

亚连original: 2018-06-09 15:42:322636parcourir

Ci-dessous, je partagerai avec vous un article sur la façon d'implémenter MUI pour faire glisser de haut en bas le menu coulissant latéral et sa partie principale. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

L'introduction du menu coulissant latéral dans le document MUI n'explique pas comment implémenter le menu coulissant latéral MUI n'a pas la fonction coulissante haut et bas par défaut et doit être activé. .

1. Ajoutez d'abord l'ID à l'élément de 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>

De ce qui précède Par exemple, vous pouvez voir que les identifiants sont ajoutés à la fois au menu coulissant latéral et à la partie principale.

sont : offCanvasSideScroll, offCanvasContentScroll

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

mui(&#39;#offCanvasSideScroll&#39;).scroll(); 
mui(&#39;#offCanvasContentScroll&#39;).scroll();

Vous avez terminé. 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(&#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>

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles Liés

Voir plus