Heim > Artikel > Web-Frontend > Verwenden Sie jQuery, um beim Scrollen nach unten automatisch zu laden
Verwenden Sie jQuery, um beim Scrollen nach unten automatisch zu laden
- 亚连Original
- 2018-06-05 17:10:151465Durchsuche
In diesem Artikel wird hauptsächlich die Methode von jQuery zum automatischen Laden von mehr beim Scrollen nach unten vorgestellt, wobei die Implementierungsfähigkeiten von jQuery zum dynamischen Betrieb von Seitenelementen basierend auf Ajax berücksichtigt werden.
Dieser Artikel beschreibt die Beispiele jQuery implementiert eine Methode, um beim Scrollen nach unten automatisch mehr zu laden. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Hier verwenden wir AJAX, um die Funktion des Scrollens bis zum Ende zum Laden von Daten 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>Das Obige ist das, was ich zusammengestellt habe für alle. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.
Verwandte Artikel:
Erstellen von Sliding-Stack-Komponenten mit Vue (ausführliches Tutorial)
Das obige ist der detaillierte Inhalt vonVerwenden Sie jQuery, um beim Scrollen nach unten automatisch zu laden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!