无限滚动功能通常是通过监听滚动事件,并在用户滚动到页面底部时自动加载更多内容来实现的。以下以jQuery为例来说明如何实现无限滚动:
首先,你需要在HTML中设置一个容器来显示内容,还可以设置一个等待加载新内容时的动画(初始时可能是隐藏的)。
* {
margin: 0;
padding: 0;
}
.content-container {
margin: 50px 50px 0 50px;
}
#content-item {
border: 1px solid #000;
height: 150px;
width: 150px;
margin: 20px;
}
#loading {
display: none;
margin: auto;
width: 60px;
aspect-ratio: 2;
--_g: no-repeat radial-gradient(circle closest-side,#4e4b4b 90%,#0000);
background:
var(--_g) 0% 50%,
var(--_g) 50% 50%,
var(--_g) 100% 50%;
background-size: calc(100%/3) 50%;
animation: l3 1s infinite linear;
}
@keyframes l3 {
20%{background-position:0% 0%, 50% 50%,100% 50%}
40%{background-position:0% 100%, 50% 0%,100% 50%}
60%{background-position:0% 50%, 50% 100%,100% 0%}
80%{background-position:0% 50%, 50% 50%,100% 100%}
}
实现的主要思路:
通过滚动区域高度+可视区域高度>=文档总高度来判断是否用户滑动页面时是否已经触底。若已触底则发送请求加载新内容。
//循环创建img
function content(){
for (let i = 1; i <= 18; i++) {
let img = document.createElement("img")
img.src = `img/1 (${i}).jpg`
img.id ="content-item"
let box = document.getElementsByClassName("content-container")[0]
box.appendChild(img)
}
}
//创建初始内容
content()
$(document).ready(function () {
// 用于防止在加载过程中重复触发加载,否则用户在等待加载时往上滑再往下滑时会重复触发
var isLoading = true;
var page = 1; // 当前页码,用于向服务器请求更多内容
// 监听滚动事件
$(window).scroll(function () {
//滚动区域高度+可视区域高度>=文档总高度时
if ($(window).scrollTop() + $(window).height() >= $(document).height() && isLoading) {
loadMoreContent();
}
});
// 加载更多内容
function loadMoreContent() {
isLoading = false; // 防止重复触发
$('#loading').show(); // 显示加载更多按钮
setTimeout(function(){//用定时器模仿发送请求以及加载耗时
content()
isLoading = true; // 加载完成,将加载状态设置为false
},2000)
}
});