Heim > Artikel > Web-Frontend > So laden Sie automatisch mehr Inhalte, wenn die Bildlaufleiste nach unten gleitet
Dieses Mal erkläre ich Ihnen, wie Sie automatisch mehr Inhalte laden Vorsichtsmaßnahmen Was sind das? .
Das Beispiel in diesem Artikel beschreibt, wie jQuery beim Scrollen nach unten automatisch mehr laden kann. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt: AJAX wird hier verwendet, um die Funktion des Ladens von Daten durch Scrollen bis zum Ende zu realisieren:<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery.min.js"></script> <script type="text/javascript"> $(function () { AddSth(); }); $(function () { $(".main").unbind("scroll").bind("scroll", function (e) { var sum = this.scrollHeight; if (sum <= $(this).scrollTop() + $(this).height()) { AddSth(); } }); }); function AddSth() { $.ajax({ type: 'POST', url: "index.aspx/ReturnSth", dataType: "json", contentType: "application/json; charset=utf-8", //data: "", success: function (data) { json = $.parseJSON(data.d); for (var i in json) { var tbBody = "<ul><li>" + json[i].sth + "</li></ul>"; $(".main").append(tbBody); } $(".main").append("<hr />"); } }); } </script> </head> <body> <form id="form1" runat="server"> <p>下拉加载更多</p><br /> <p class="main" style="border: 1px solid red; height: 700px; overflow: auto;"></p> </form> </body> </html>Ich glaube, das haben Sie Ich habe die Methode gemeistert, nachdem ich den Fall in diesem Artikel gelesen habe, und es wird weitere spannende Dinge geben. Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website! Empfohlene Lektüre:
So verwenden Sie JQuery, um einen Lupeneffekt zu erstellen
JQuery fügt gestaltete HTML-Tags hinzu
Wie jQuery Ereignisse an dynamisch generierte Tags bindet
Wie jQuery den Wert von Tag-Unterelementen erhält
Das obige ist der detaillierte Inhalt vonSo laden Sie automatisch mehr Inhalte, wenn die Bildlaufleiste nach unten gleitet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!