Beim Durchsuchen von Webseiten auf Mobiltelefonen wird häufig eine Funktion verwendet. Wenn wir JD oder Taobao durchsuchen, rutscht die Seite nach unten und wir sehen, dass die Daten automatisch in die Liste geladen werden. Ich wusste nicht, wie diese Funktionen zuvor implementiert wurden, daher simulierte und implementierte ich solche Funktionen in meinem PC -Browser. Schauen wir uns den Browsing -Effekt an:
Wenn die Bildlaufleiste am Ende der Seite scrollt, wird die Eingabeaufforderung "Laden ..." angezeigt.
Wenn auf der Seite alle Daten geladen sind, fordert das Scrollen zum Ende der Seite auf "die Daten wurden bis zum Ende geladen":
Der Prozess der Implementierung der unendlichen Datenbelastung erfolgt ungefähr wie folgt:
1. Scrollen Sie die Balken am Ende der Seite.
2.. Laden Sie das Laden von AJAX aus und laden Sie die von der Anforderung zurückgegebenen Daten in die Liste.
Wie kann ich feststellen, ob die Bildlaufleiste am Ende der Seite scrollt? Wir können eine Regel festlegen: Wenn die Bildlaufhöhe der Bildlaufleiste weniger als 20 Pixel von der Höhe des gesamten Dokuments unterscheidet, wird berücksichtigt, dass die Bildlaufleiste zum Ende der Seite gescrollt ist:
Dokumenthöhe - Ansichtsfensterhöhe - Bildlaufleiste Bildlaufhöhe <20
Um ein solches Urteil durch Code zu erhalten, müssen wir verstehen, in welchem Code die oben genannten Höhen erhalten werden? Sie können sich auf einen Artikel beziehen, den ich zuvor geschrieben habe: "HTML -Element -Koordinatenpositionierung, Sie müssen diese Wissenspunkte beherrschen."
Im obigen Urteil habe ich eine Methode verkapuliert:
// Erkennung, ob die Bildlaufleiste am Ende der Seitenfunktion iscrolltopageBottom () {// Dokumenthöhe var documentheight = document.documentElement.offseteight; var ViewPorthEight = GetViewPortSize (). H; var scrollHeight = window.pageyOffset || document.documentElement.scrolltop || document.body.scrolltop || 0; Return DocumentHeight - ViewPheight - ScrollHeight <20; }Sobald wir das Urteilsvermögen haben, können wir einen Timer einschalten und einmal in 900 Millisekunden überwachen. Wenn iscrolltopageBottom () true zurückgibt, rufen Sie AJAX an, um Daten anzufordern. Wenn FALSE zurückgegeben wird, geht es vor der Überwachung 900 Millisekunden über.
Das Folgende ist die Kerncode -Implementierung:
<! DocType html> <html Lang = "en"> <head> <meta charset = "utf-8"> <title> Infinite Pagination </title> <link rel = "styleSheet" href = "assets/css/index.css"/> </head> <body> <body> <body> <div> <ul id = "liste"> </> </hace> <body> <body> <div> <ul id = "liste" src = "// cdn.bootcs.com/jquery/3.1.0/jquery.min.js"></Script><Script src =" js/jquery.mockjax.js "> </script> <script type =" text/javaScript "src =" js/datamock.js " Die W- und H -Eigenschaften eines Objekts gibt die Größenfunktion des Ansichtsfensatzes GetViewPortSize (w) {// Verwenden Sie das angegebene Fenster, wenn kein Parameter vorhanden ist, das aktuelle Fenster w = w || Fenster; // Außer IE8 und früheren Versionen können andere Browser verwenden, wenn (W.innerWidth! // für IE (oder einen beliebigen Browser) im Standardmodus var d = w.dokument; if (document.compatmode == "CSS1Compat") return {w: d.documentElement.clientwidth, h: d.documentElement.clientHeight}; // kehre zu Browsern im seltsamen Modus zurück. } // Erkennen Sie, ob die Bildlaufleiste am Ende der Seitenfunktion iscrolltopageBottom () {// Dokumenthöhe var documentHeight = document.documentElement.offseteight; var ViewPorthEight = GetViewPortSize (). H; var scrollHeight = window.pageyOffset || document.documentElement.scrolltop || document.body.scrolltop || 0; Return DocumentHeight - ViewPheight - ScrollHeight <20; } // Produktvorlagenfunktion getGoodStemplate (Waren) {return "<li>" + "<div class = 'pic-wrap linksfloat'>" + "<img src = '" + goods.pic + "'>" + "" </div> " +" <div class = 'info-wrap linkfloat'> "</div class = 'info-name' + "<div class = 'info-address'> <span>" + goods.address + "</span> </div>" + "<div class = 'info-bottom'>" + "<div class = 'info-price linkfloat'> <span> ￥" + Goods.Price + "</span> </div>" + "<div class = 'infoStar =' infoStar = 'infoStar =' infostar 'infoStar =' infoStar = 'infostar' infoStar = 'infostar' infoStar = 'infostar' infoStar '. "Empfohlen </span> </div>" + "<div class = 'info-more linkfloat'> <span> Weitere Informationen </span> </div>" + "</div>" + "</div>" + "</li>"; } // laden Sie während der Initialisierung 100 Datenstücke direkt auf die Liste $ .ajax ("http: // localhost: 8800/loadData? SessionID =" + ( + neues Datum). Done (Funktion (Ergebnis) {if (result.status) {var html = "; ergebnis. $ ("#list"). append (html); // Datenfunktion laden loadDatadynamic () {// Zeigen Sie zuerst, dass es geladen wird, wenn ($ ("#loadingli"). Länge === 0) $ ("#list"). Append ("<li id = 'loadingli' class = 'ladering'> laden ... </li>"); sonst {$ ("#ladeingli"). Text ("Laden ..."). removeclass ("space"); } var loadingli = document.getElementById ("loadingli"); loadingli.scrollintoview (); // Ladedaten, nachdem die Daten geladen wurden, müssen Sie die Ladeaufforderung VAR HASDATA = False, msg = "" entfernen; $ .ajax ("http: // localhost: 8800/loadData? SessionID =" + ( + neues Datum)). Done (Funktion (Ergebnis) {if (result.status) {if (result.data.Length> 0) {HasData = true; var html = "; GetGoodStemplate (Waren); setTimeout (function () {$ (document.body) .Scrolltop (document.body.scrolltop -40);}, 500); } // Wenn die Bildlaufleiste am Ende der Seite scrolliert, müssen neue Daten geladen werden und die Ladeaufforderung wird angezeigt. zurückkehren; } loadDatadynamic (); } // Beginnen Sie mit der Erkennung von Scrollbar WatchScroll (); </script> </body> </html>Die Daten, die ich über Jquery-Mockjax in der Demo simulierte. Der Code ist wie folgt:
/*** Simulationsschnittstelle. */var i = 0, len = 200, Adressen = ["Sichuan", "Peking", "Shanghai", "Guangzhou", "Shenzhen", "Gansu", "Yunnan", "Zhejiang", "Qinghai," Guizhou "," Function Getdata () {) {) {) {) {) {{{{math. []; for(; i < size; i++){ arr.push({ name: "Apple" + (i % 10 + 1), pic: "assets/images/iphone" + (i % 10 + 1) + ".jpg", price: parseInt(Math.random() * 10000), star: parseInt(Math.random() * 1000), address: addresses[i % 10] }) } return arr;} $. Mockjax ({url: 'http: // localhost: 8800/loadData*', ResponTime: 1000, Antwort: Funktion (Einstellungen) {this.responseText = {Status: TRUE, Daten: getData ()}}});Die gesamte vollständige Demo, die ich auf GitHub hochgeladen habe:
https://github.com/heavis/pageloader
Online -Demo:
https://heavis.github.io/pageloader/index.html
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.