Rumah > Artikel > hujung hadapan web > 利用jQuery实现滚动到底部时自动加载
利用jQuery实现滚动到底部时自动加载
- 亚连asal
- 2018-06-05 17:10:151465semak imbas
这篇文章主要介绍了jQuery实现滚动到底部时自动加载更多的方法,涉及jQuery基于ajax动态操作页面元素相关实现技巧,需要的朋友可以参考下
本文实例讲述了jQuery实现滚动到底部时自动加载更多的方法。分享给大家供大家参考，具体如下：
这里利用AJAX，实现滚动到底加载数据功能：
<!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>上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
关于在vue-cli 打包时，抽离项目相关配置文件的问题（详细教程）
关于在React Native使用fetch实现图片上传问题（详细教程）
Atas ialah kandungan terperinci 利用jQuery实现滚动到底部时自动加载. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：使用angular、react和vue如何实现相同的面试题组件Artikel seterusnya：在Angular2.0中如何实现modal对话框