Heim > Artikel > Web-Frontend > So implementieren Sie ein seitliches Schiebemenü in MUI

So implementieren Sie ein seitliches Schiebemenü in MUI

亚连Original: 2018-06-09 15:42:322610Durchsuche

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>

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

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>

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!

class JS

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：vue-infinite-loading erzeugt einen unendlichen LadeeffektNächster Artikel：vue-infinite-loading erzeugt einen unendlichen Ladeeffekt

In Verbindung stehende Artikel

Mehr sehen