当前位置：首页 > JavaScript

js实现下一页

2026-03-01 11:42:38JavaScript

实现下一页功能的方法

在JavaScript中实现下一页功能通常涉及分页逻辑、DOM操作和事件处理。以下是几种常见的实现方式：

基于数组的分页

假设有一个数据数组需要分页显示：

const data = [/* 你的数据数组 */];
let currentPage = 1;
const itemsPerPage = 10;

function showPage(page) {
    const startIndex = (page - 1) * itemsPerPage;
    const endIndex = startIndex + itemsPerPage;
    const pageData = data.slice(startIndex, endIndex);

    // 渲染pageData到页面
    renderItems(pageData);
}

function nextPage() {
    if (currentPage * itemsPerPage < data.length) {
        currentPage++;
        showPage(currentPage);
    }
}

// 绑定下一页按钮
document.getElementById('nextBtn').addEventListener('click', nextPage);

AJAX分页

从服务器动态加载下一页数据：

let currentPage = 1;

function loadNextPage() {
    fetch(`/api/data?page=${currentPage + 1}`)
        .then(response => response.json())
        .then(newData => {
            if (newData.length > 0) {
                currentPage++;
                appendItems(newData);
            }
        });
}

// 绑定滚动事件或按钮点击
window.addEventListener('scroll', () => {
    if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 500) {
        loadNextPage();
    }
});

无限滚动

自动加载下一页内容当用户滚动到页面底部：

let isLoading = false;

window.addEventListener('scroll', () => {
    if (isLoading) return;

    if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 200) {
        isLoading = true;
        loadNextPage().finally(() => isLoading = false);
    }
});

使用分页组件

对于框架应用（如Vue/React），可以使用现成的分页组件：

// React示例
function Pagination({ currentPage, totalPages, onPageChange }) {
    return (
        <button 
            onClick={() => onPageChange(currentPage + 1)}
            disabled={currentPage >= totalPages}
        >
            下一页
        </button>
    );
}