So implementieren Sie ein seitliches Schiebemenü in MUI-js-Tutorial-php.cn

So implementieren Sie ein seitliches Schiebemenü in MUI

亚连

Freigeben： 2018-06-09 15:42:32

Original

2625 Leute haben es durchsucht

Im Folgenden werde ich mit Ihnen einen Artikel darüber teilen, wie Sie MUI implementieren, um das seitliche Schiebemenü und seinen Hauptteil nach oben und unten zu verschieben. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich sein wird.

Die Einführung des seitlichen Schiebemenüs im MUI-Dokument erklärt nicht, wie das seitliche Schiebemenü implementiert wird. Das seitliche Schiebemenü der MUI verfügt standardmäßig nicht über die Auf- und Ab-Schiebefunktion und muss aktiviert werden .

1. Fügen Sie zunächst die ID zum Element von class="mui-scroll-wrapper" hinzu:

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

Nach dem Login kopieren

Wie aus ersichtlich ist Im obigen Beispiel werden IDs sowohl zum seitlichen Schiebemenü als auch zum Hauptteil hinzugefügt.

sind: offCanvasSideScroll, offCanvasContentScroll

2. Zweitens aktivieren Sie es in JS:

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

Nach dem Login kopieren

Jetzt können Sie nach unten rutschen Überschreitung der Höhe. Beachten Sie, dass es über die Höhe hinausgeht! Genau wie bei einem Browser gibt es keine Schiebefunktion, wenn der „spezifische Anzeigeinhalt der Hauptoberfläche“ den Umfang nicht überschreitet.

MUI: MUI-Schiebemenü.

Vollständiger Code:

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

Nach dem Login kopieren

Das Obige habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

So implementieren Sie die Austauschmethode zweier Variablenwerte in JS

So implementieren Sie benutzerdefinierte Anweisungen in Vue?

So ändern Sie den Stil untergeordneter Komponenten durch übergeordnete Komponenten in Vue

Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein seitliches Schiebemenü in MUI. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!