Implementieren Sie einen Content-Scrolling-Effekt basierend auf iScroll-js-Tutorial-php.cn

Implementieren Sie einen Content-Scrolling-Effekt basierend auf iScroll

亚连

Freigeben： 2018-05-26 17:03:51

Original

1539 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich der auf iScroll basierende Content-Scroll-Effekt ausführlich vorgestellt, der einen gewissen Referenzwert hat

Einführung in iScroll

iScroll ist ein Scroll-Steuerelement für Web-Apps. Es kann den Scroll-Listenvorgang in nativen IOS-Anwendungen simulieren und auch Funktionen wie Zoomen, Pull-to-Refresh, präzise Elementerfassung und benutzerdefinierte Scroll-Leisten implementieren. Die vom Blogger hier verwendete Version ist iScroll4.25. Sie können sie von der offiziellen Website herunterladen.
Offizielle Website-Adresse: http://iscrolljs.com/

2. So verwenden Sie iScroll

1.iScroll-Nutzungsstruktur

Die optimale Struktur für die Verwendung von iScroll ist im Allgemeinen wie folgt:

HTML:

<p id="wrapper">
  <p id="scroller">
   <ul>
    <li></li>
    ...
   </ul>
   <ul>
    <li></li>
    ...
   </ul>
  </p>
 </p>

Nach dem Login kopieren

Hinweis: 1. iScroll muss den Wrapper außerhalb des Bildlaufinhalts kontaktieren, um eine Wirkung zu erzielen.
2. Nur das erste untergeordnete Element im Wrapper kann gescrollt werden.

2. iScroll instanziieren

iScroll muss vor dem Aufruf instanziiert werden. Der Instanziierungscode lautet wie folgt (fügen Sie den folgenden Code im Head-Tag hinzu ) ：

<script src="iscroll.js"></script>
 <script>
  var myscroll;//myscroll是全局变量，可以任意地方调用
  function loaded(){
   myscroll = new iScroll("wrapper");
   }
  window.addEventListener("DOMContentLoaded",loaded,false);
 </script>

Nach dem Login kopieren

3. Rolling-Test-Beispiel

HTML+CSS:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script src="iscroll-4.2.5fix.js"></script><!--引入js包-->
<!--实例化iScroll-->
<script type="text/javascript">
 var myscroll;
 function loaded(){
 myscroll = new iScroll("wrapper");
 }
 window.addEventListener("DOMContentLoaded",loaded,false);
</script>
<!--CSS样式设置-->
#wrapper {
 position:absolute; z-index:1;
 top:45px; bottom:48px; left:0;
 width:100%;
 background:#aaa;
 overflow:auto;
}

#scroller {
 position:relative;
/* -webkit-touch-callout:none;*/
 -webkit-tap-highlight-color:rgba(0,0,0,0);

 float:left;
 width:100%;
 padding:0;
}

#scroller ul {
 position:relative;
 list-style:none;
 padding:0;
 margin:0;
 width:100%;
 text-align:left;
}

#scroller li {
 padding:0 10px;
 height:40px;
 line-height:40px;
 border-bottom:1px solid #ccc;
 border-top:1px solid #fff;
 background-color:#fafafa;
 font-size:14px;
}

#scroller li > a {
 display:block;
}
</style>
<title>滚动测试</title>
</head>
<body>
<p id="wrapper">
 <p id="scroller">
  <ul id="thelist">
   <li>Pretty row 1</li>
   <li id="aaa">Pretty row 2</li>
   <li>Pretty row 3</li>
   <li>Pretty row 4</li>
   <li>Pretty row 5</li>
   <li>Pretty row 6</li>
   <li>Pretty row 7</li>
   <li>Pretty row 8</li>
   <li>Pretty row 9</li>
   <li>Pretty row 10</li>
   <li>Pretty row 11</li>
   <li>Pretty row 12</li>
   <li>Pretty row 13</li>
   <li>Pretty row 14</li>
   <li>Pretty row 15</li>
   <li>Pretty row 16</li>
   <li>Pretty row 17</li>
   <li>Pretty row 18</li>
  </ul>
 </p>
</p>
</body>
</html>

Nach dem Login kopieren

4. Betriebseffekt

Blogger gerade Beginnen Sie mit dem Lernen. Teilweises Scrollen von Inhalten ist nur die grundlegendste Funktion von iScroll. Als nächstes werden Blogger versuchen, Aktualisierungen und andere Funktionen durchzuführen.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Eine einfache Anwendung basierend auf der Ajax-Formularübermittlung und Hintergrundverarbeitung

Ajax ermöglicht das einfache Hochladen von Bildern und Vorschau anzeigen Zusammenfassung der Techniken zur Implementierung von

basierend auf Ajax-HTML

Das obige ist der detaillierte Inhalt vonImplementieren Sie einen Content-Scrolling-Effekt basierend auf iScroll. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!