Listloading ist ein mobiles Pull-up- und Pulldown-Laden mehr Komponenten. Es stützt sich hauptsächlich auf Komponenten, die basierend auf iscroll.js v5.1.2 entwickelt wurden. Die Basisbibliothek kann jQuery.js oder zepto.js verwenden, um den DOM -Knoten zu bedienen. Derzeit verwende ich Zepto.js als grundlegende Bibliothek, um das DOM zu betreiben, und existiere in Form eines JQuery-Plug-Ins. Wenn Sie es nicht als Plug-In verwenden möchten, müssen Sie die Listenbeladung nur direkt in die von Ihnen benötigte Bibliothek portieren. Es ist in Ordnung. Listloading wurde hauptsächlich für mobile Terminals entwickelt. Bei der Verwendung des Browsers wird das Scrollen geliefert. Die Benutzererfahrung ist sehr unfreundlich und unterscheidet sich sehr von Android und iOS. Daher wählt es iscroll.js. Die Implementierungsmethode besteht darin, die 2D -Konvertierung von CSS3 -Animation zu verwenden, um den Bildlaufeffekt zu erzielen. Das Transformationsattribut verwendet Hardware -Beschleunigung und die Leistungsmethode wurde erheblich verbessert.
NPM -Installation
Die Codekopie lautet wie folgt:
NPM Installation -g -Listenbeladung
Wie man es benutzt, ist wie folgt:
1. HTML -Struktur
Die gleiche Struktur wie die erstellte ISCroll, der angegebene erstellte Elementknoten muss jedoch die ID angeben, da eine identifizierbare Identität für die Veröffentlichung des Abonnementmodus in der Komponente erforderlich ist. Da die ISCroll die Höhe festlegen muss, bevor das Knotenelement erstellt wird, ist sie ansonsten nicht scrollbar. Die Iscroll wird erstellt und dem ersten untergeordneten Element zum Scrollen zugeordnet, sodass auch die Aufnahme und Dropdown-Aktualisierung der Listenbelastung dem ersten untergeordneten Element hinzugefügt wird. Stellen Sie sich in der Tat das erste Kinderelement als Körper in HTML vor.
2. JS, die eingeführt werden müssen
<script src = "../ src/jslib/zepto.min.js"> </script> <script src = "../ src/jslib/iscroll.js"> </script> <script src = "../ building.js"> </script>
3. Rufen Sie an
var m = 3, n = 0; // Sie müssen die Höhe des übergeordneten Elements vor dem Erstellen eines Iscrolls festlegen. Andernfalls können Sie Iscroll $ ('#listloading'). Höhe ($ (Fenster) .Height ()); // Vorlage oder AJAX -Anforderung Methode var createHtml = function () {var __html = '; Date (). GetTime (); jetzt = neues Datum (jetzt + i*1000000); __ html + = '<li> <span> </span> <p> <time>' + now.gethours () + ':' + now.getMinutes () + ':' + nun.getSeconds () () + '</time> time> time> liste-up-up' + (n + ubsh-ups-up-up-up-up-up ' + (n) + (). Komponente ... </li> ';} return __html;} // Der Selektor muss eine ID sein, da die Veröffentlichung von Abonnement als Identifikator var listLoading = $ ('#Listing ') verwendet werden muss. createHtml (); if (m <1) {flg = true;} else {$ ('#order-list'). append (__ html);} // Nachdem die Daten geladen wurden, ist es notwendig, das Ende zurückzukehren. createHtml (); $ ('#order-list'). Bubbles empfiehlt es auch, die Klickmethode selbst zu schreiben. Wenn Sie die Verhinderung von DeFault für false aktivieren, löst diese Zeile das Problem des Einklicks -Fehlers. Wenn Sie diesen Wert jedoch öffnen und unter WeChat ziehen, wird es Probleme geben. Nach dem Schlittensende kann Scrollend nicht ausgelöst werden. Also habe ich eine Ereignismethode selbst eingebettet.Reproduktionsdiagramm
/p>
4. API
4.1 nach unten ziehen, um zu erfrischen
Die Initialisierung wird einmal ausgeführt, hauptsächlich, um eine ISCROLL zu erstellen, und dann wird jede Auffrischung nach dem Ende jeder Auffrischungsfrischung ausgeführt. Nach der Ausführung Ihres Programms in der Methode muss eine Rückruffunktion ausgeführt werden, um alle Programme zu informieren. Listloading wird automatisch die ISCROLL -Aktualisierungsfunktion aufgerufen, und für den Rückruf ist keine Parameterübertragung erforderlich.
options.pulldownAction = function (cb) {// runter zum Aktualisieren .... // Nach der Ausführung der Ausführungsmethode muss Callback CB () ausgeführt werden;}4.2 Auffrischung
Jede Pull-up-Aktualisierung wird nach Abschluss der Aktualisierung ausgeführt. Gleiches ist erforderlich, um eine Rückruffunktion nach der Ausführung Ihres Programms auszuführen. Im Rückruf ist ein Boolescher Wert erforderlich. Wenn es wahr ist, warum wurde es geladen und bis zum Ende gezogen.
options.pullupaction = function (cb) {// fällen Aktualisierung .... // Nach der Ausführung der Ausführungsmethode muss der Rückruf treu sein, um bis zum Ende CB (true) zu ziehen;}4.3 Zerstöre Listloading
Die Codekopie lautet wie folgt:
listloading.destroy ();
4.4 Aktualisierung von Listenladungen
Wenn es im Scrolling Area -Knoten Ergänzungen und Löschungen gibt, müssen Sie diese Methode nach Abschluss des Vorgangs aufrufen.
Die Codekopie lautet wie folgt:
listloading.refresh ();
4.5, ob der Zeitverlustwert angezeigt wird, ist falsch
True Pulldown zeigt die Zeit, die Zeit von der letzten Aktualisierung
Die Codekopie lautet wie folgt:
Optionen.Disabletime = true
4.6 Ziehen Sie nach oben, um den Text zu aktualisieren
Die Codekopie lautet wie folgt:
options.UploadMoretxt = 'Zieh nach oben, um den Text zu aktualisieren'; // Sie können HTML -Tags hineinstellen
4.7 Runter ziehen, um den Text zu aktualisieren
Die Codekopie lautet wie folgt:
options.pulldrefreshtxt = 'ziehen Sie nach unten, um den Text zu aktualisieren'; // Sie können HTML -Tags hineinstellen
4.8 chinesische Charaktere laden
Die Codekopie lautet wie folgt:
Optionen.loadertxt = 'Chinesische Zeichen laden'; // Sie können HTML -Tags hineinstellen
4.9 Aktualisierungstext veröffentlichen
Die Codekopie lautet wie folgt:
Optionen.RealTimetxt = 'Release -Aktualisierungstext'; // Sie können HTML -Tags hineinstellen
4.10 Alle Texte wurden geladen
Die Codekopie lautet wie folgt:
Optionen.loaderendTxt = 'Alle Text wurden geladen'; // Sie können HTML -Tags hineinstellen
4.12 ISCroll -Konfiguration
Die Codekopie lautet wie folgt:
options.iscrolloptions = {};
Das obige ist die vom Editor eingeführte listloading.js mobile Terminal-Pull-Down-Aktualisierungskomponente. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird allen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!