js实现更多
实现“更多”功能的 JavaScript 方法
监听滚动事件动态加载内容
通过监听页面滚动事件，当用户滚动到接近底部时触发加载更多内容。使用 window.innerHeight 和 document.documentElement.scrollTop 计算滚动位置，结合 setTimeout 避免频繁触发。
window.addEventListener('scroll', function() {
if (window.innerHeight + window.document.documentElement.scrollTop >= document.documentElement.offsetHeight - 200) {
loadMoreContent();
}
});
function loadMoreContent() {
// 异步请求数据并追加到页面
fetch('/api/more-data')
.then(response => response.json())
.then(data => {
const container = document.getElementById('content-container');
data.forEach(item => {
container.innerHTML += `<div class="item">${item.content}</div>`;
});
});
}按钮点击触发加载
添加“加载更多”按钮，用户点击时通过事件监听器加载额外内容。适合需要明确用户意图的场景。
document.getElementById('load-more-btn').addEventListener('click', function() {
fetch('/api/more-data')
.then(response => response.json())
.then(data => {
const container = document.getElementById('content-container');
data.forEach(item => {
container.appendChild(createItemElement(item));
});
});
});
function createItemElement(item) {
const div = document.createElement('div');
div.className = 'item';
div.textContent = item.content;
return div;
}Intersection Observer API 实现懒加载
现代浏览器支持的更高效方法，观察目标元素与视口的交叉状态。适合无限滚动或图片懒加载场景。
const observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
loadMoreContent();
}
}, { threshold: 0.1 });
observer.observe(document.getElementById('load-more-trigger'));
function loadMoreContent() {
// 数据加载逻辑同上
}分页参数管理
需要跟踪当前页码或游标，确保每次请求获取新数据而非重复内容。
let currentPage = 1;
function loadMoreContent() {
fetch(`/api/more-data?page=${currentPage}`)
.then(response => response.json())
.then(data => {
if (data.length === 0) {
document.getElementById('load-more-btn').disabled = true;
return;
}
currentPage++;
// 追加内容到容器
});
}性能优化注意事项
- 使用
documentFragment减少重绘次数 - 添加加载状态提示避免重复请求
- 移动端注意滚动节流（可使用
requestAnimationFrame） - 服务端应实现分页查询，避免一次性返回大量数据
let isLoading = false;
function loadMoreContent() {
if (isLoading) return;
isLoading = true;
showLoadingIndicator();
fetch('/api/more-data')
.then(/* ... */)
.finally(() => {
isLoading = false;
hideLoadingIndicator();
});
}
