Vorwort
Im vorherigen Abschnitt gab es ein mobiles Projekt, bei dem Pulldown-Aktualisierung und Pull-up-Laden mehr Effekte verwenden musste. Das erste Spiegelbild in meinem Kopf war die Wirkung von Weibo. Am Anfang hatte ich einige Abweichungen in meinem Verständnis. Ich dachte, Pulldown sei auch ein Anhangsdaten, und Pull-up war eine Anhangsdaten. Später fragte ich meine Kollegen und stellte fest, dass der Abzug nur eine Aktualisierung der neuesten Daten sei und Pull-up eine Anhangendaten war.
Nutzungstipps
1. Siehe iscroll.js und fügen Sie zwei Ereignisse während der Initialisierung hinzu: TouchMove und Domcontent geladen.
2. Implementieren Sie das OnScrollend-Ereignis des ISCroll-Plug-Ins, dh in diesem Event rufen Sie Ihre eigene AJAX-Methode an, um Daten zu aktualisieren und anzuhängen.
3. Wenn Sie mehr Anfragen im Hintergrund hochziehen und laden, entspricht es den Anforderungsdaten für Paging. Zu diesem Zeitpunkt muss der PageIndex -Parameter während der AJAX -Anfrage gesendet werden, und bei der Initialisierung des Ladens muss ein PageCount aus dem Hintergrund zurückgegeben werden, damit der Vordergrund beurteilt wird.
4. Das Wichtigste ist, die Pulldown -Aktualisierungsmethode (PulldownAction) und die Pullup -Last mehr (Pullupaction) -Methode zu implementieren.
Laufeffektdiagramm
Implementierungsmethode
var myscroll, pulldownel, pulldownOffset, pullupel, pullupOffset, generatedCount = 0;/** * Pulldown-Aktualisierung (passen Sie diese Methode an) * myscroll.refresh (); Nachdem die Daten geladen wurden, rufen Sie die Schnittstellen -Update -Methode */Funktion puldownAction () {setTimeout (function () {var el, li, i; el = document.getElementById ('thelist'); für (i = 0; i <3; i ++) {li = document.createelement ('li'). El.Childnodes [0]); }/** * scrollen und schalten Sie die Seiten (passen Sie diese Methode an) * myscroll.refresh (); // Rufen Sie nach dem Laden der Daten die Schnittstellen-Update-Methode auf*/Funktion pullupaction () {setTimeout (function () {// <- Simulation der Netzwerkverstärkung, entfernen Sie SetTimeout aus der Produktion! Var el, li, i; el = document. (++ generiertes Count); }/*** initialisieren Sie die ISCroll -Steuerung*/Funktion loaded () {Pulldownel = document.getElementById ('Pulldown'); puldownOffset = puldownel.offseteight; pullupel = document.getElementById ('pullup'); PullupOffset = Pullupel.Offseteight; myScroll = new iscroll ('Wrapper', {ScrollBarClass: 'myScrollBar', Usetransition: false, topoffset: puldownOffset, onrefresh: function () {if (puldownel.classname.match ('laden') {Pulldown.classname = '; puldownel.querySelector ('. PulldownLabel'). ONSCROLLMove: Funktion () {if (this.y> 5 &&! puldownel.classname.match ('Flip') {Puldownel.ClassName = ''; ! ClassName.Match ('Flip') {Pullupel.ClassName = 'Flip'; PULLUPEL.CLASSNAME.MATCH ('Flip') {Pullupel.ClassName = ''; {Puldownel.ClassName = 'Loading'; Pullupel.querySelector ('. PulluPlabel'). Innerhtml = 'Loading ...'; setTimeout (function () {document.getElementById ('Wrapper'). style.left = '0';}, 800);} // Initialisieren Sie die Bindung des CRECROLL -Kontrolldokuments.Zusammenfassen
Die Hauptsache ist, einige Initialisierungsvorgänge auf ISCroll durchzuführen, verschiedene Eingabeaufentwicklungsinformationen für verschiedene Aktionen anzuzeigen und dann entsprechende Aktualisierung zu schreiben und weitere Verarbeitungsmethoden für Pulldown- und Pull-up-Ereignisse zu laden.