案例的分析
如何确定当前显示的数据已经浏览完毕?
公式:(滚动条距底部的距离 + 滚动条上下滚动的距离 + 当前窗口的高度) >= 当前文档的高度
所需知识点
前端:
scroll() 鼠标滚动事件
$(window).height() 当前窗口的高度
$(window).scrollTop() 滚动条上下滚动的距离
$(document).height() 当前文档的高度
后台:
mybatis分页插件
查询结果封装为JSON格式
实现代码(前端)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网站首页</title>
</head>
<body>
<div class="center">
<ul class="news_list">
</ul>
<div class="loading" style="text-align: center; height: 80px">
<img src="img/loading2.gif" height="100%">
</div>
<div id="no" style="text-align: center;color: red;font-size: 20px"></div>
</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
let send = true;
let start = 1;
let pageSize = 10;
let bottom = 1;
$(function () {
$(window).scroll(function () {
let windowHeight = $(window).height();
let scrollTop = $(window).scrollTop();
let docHeight = $(document).height();
if ((bottom + scrollTop + windowHeight) >= (docHeight * 0.9)) {
if (send == true) {
send = false;
queryByPage(start, pageSize);
start++;
}
}
});
});
$(function () {
send = false;
queryByPage(start, pageSize);
start++;
});
function queryByPage(start, pageSize) {
$(".loading").show();
$.post(
"newsServlet",
{"start": start, "pageSize": pageSize},
function (data) {
if (data.length == 0) {
$(".loading").hide();
$("#no").html("我也是有底线的...");
return;
}
$(".loading").hide();
let titles = "";
for (let i = 0; i < data.length; i++) {
titles += `<li><div class="title-box">
<a href="#" class="link">
${data[i].title}
<hr></a></div></li>`;
}
$(".news_list").append(titles);
send = true;
},
"json"
);
}
</script>
</html>
实现代码(后端)
简单的接收当前页以及每页多少条数据,访问数据库,通过mybatis分页插件实现分页查询封装数据,返回给前端。