js实现翻页效果
使用JavaScript实现翻页效果
翻页效果可以通过监听滚动事件或点击按钮触发，动态加载内容或跳转页面。以下是几种常见的实现方式：
监听滚动事件实现无限滚动
window.addEventListener('scroll', function() {
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 500) {
loadMoreContent();
}
});
function loadMoreContent() {
// 模拟异步加载数据
fetch('your-api-endpoint')
.then(response => response.json())
.then(data => {
const container = document.getElementById('content-container');
data.forEach(item => {
const element = document.createElement('div');
element.textContent = item.content;
container.appendChild(element);
});
});
}点击按钮翻页
<div id="content-container"></div>
<button id="prev-page">上一页</button>
<button id="next-page">下一页</button>let currentPage = 1;
const contentContainer = document.getElementById('content-container');
const prevBtn = document.getElementById('prev-page');
const nextBtn = document.getElementById('next-page');
function loadPage(page) {
fetch(`your-api-endpoint?page=${page}`)
.then(response => response.json())
.then(data => {
contentContainer.innerHTML = '';
data.forEach(item => {
const element = document.createElement('div');
element.textContent = item.content;
contentContainer.appendChild(element);
});
});
}
prevBtn.addEventListener('click', () => {
if (currentPage > 1) {
currentPage--;
loadPage(currentPage);
}
});
nextBtn.addEventListener('click', () => {
currentPage++;
loadPage(currentPage);
});
// 初始化加载第一页
loadPage(currentPage);使用Intersection Observer实现懒加载
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
loadMoreContent();
observer.unobserve(entry.target);
}
});
}, { threshold: 1.0 });
const sentinel = document.createElement('div');
document.body.appendChild(sentinel);
observer.observe(sentinel);
function loadMoreContent() {
// 加载内容的逻辑
// 加载完成后重新创建新的sentinel并观察
const newSentinel = document.createElement('div');
document.body.appendChild(newSentinel);
observer.observe(newSentinel);
}分页器组件实现
<div id="pagination">
<span class="page-number" data-page="1">1</span>
<span class="page-number" data-page="2">2</span>
<span class="page-number" data-page="3">3</span>
</div>const pageNumbers = document.querySelectorAll('.page-number');
pageNumbers.forEach(button => {
button.addEventListener('click', (e) => {
const page = e.target.dataset.page;
loadPage(page);
// 更新活动页样式
pageNumbers.forEach(btn => btn.classList.remove('active'));
e.target.classList.add('active');
});
});
function loadPage(page) {
// 根据页码加载内容
}注意事项
- 实现无限滚动时要注意节流，避免频繁触发加载
- 分页时要考虑边界情况（第一页和最后一页）
- 加载新内容时显示加载状态，提升用户体验
- 对于大量数据，考虑虚拟滚动技术提高性能
这些方法可以根据具体需求组合使用，实现更复杂的翻页效果。实际项目中可能需要结合前端框架如React或Vue来构建更完善的翻页组件。
