Comment implémenter le menu coulissant latéral dans MUI-js tutoriel-php.cn

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

亚连

Libérer： 2018-06-09 15:42:32

original

2625 Les gens l'ont consulté

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>

Copier après la connexion

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();

Copier après la connexion

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>

Copier après la connexion

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