Maison > Article > interface Web > Utilisez jQuery pour charger automatiquement lors du défilement vers le bas
Utilisez jQuery pour charger automatiquement lors du défilement vers le bas
- 亚连original
- 2018-06-05 17:10:151468parcourir
Cet article présente principalement la méthode de jQuery pour charger automatiquement davantage lors du défilement vers le bas, impliquant les compétences de jQuery en matière d'implémentation d'éléments de page fonctionnant de manière dynamique basés sur ajax. Les amis dans le besoin peuvent s'y référer
Cet article décrit les exemples. jQuery implémente une méthode pour charger automatiquement davantage lors du défilement vers le bas. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :
Ici, nous utilisons AJAX pour réaliser la fonction de défilement jusqu'à la fin pour charger les données :
<!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>Ce qui précède est ce que J'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.
Articles associés :
Création de composants de pile coulissante à l'aide de vue (tutoriel détaillé)
À propos de l'utilisation de fetch pour télécharger des images dans React Native (tutoriel détaillé)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!