当前位置：首页 > JavaScript

js实现翻页

2026-01-30 09:19:28JavaScript

JavaScript实现翻页功能

翻页功能通常用于分页展示数据，以下是几种常见的实现方式：

基础DOM操作实现

通过修改DOM元素实现简单的翻页效果：

let currentPage = 1;
const totalPages = 10;

function updatePage(newPage) {
    if (newPage < 1 || newPage > totalPages) return;
    currentPage = newPage;
    document.getElementById('page-info').textContent = `Page ${currentPage}`;
    // 这里添加实际内容更新逻辑
}

document.getElementById('prev-btn').addEventListener('click', () => {
    updatePage(currentPage - 1);
});

document.getElementById('next-btn').addEventListener('click', () => {
    updatePage(currentPage + 1);
});

动态分页按钮生成

根据总页数动态生成分页按钮：

function renderPagination(totalPages) {
    const container = document.getElementById('pagination');
    container.innerHTML = '';

    for (let i = 1; i <= totalPages; i++) {
        const btn = document.createElement('button');
        btn.textContent = i;
        btn.addEventListener('click', () => {
            updatePage(i);
        });
        container.appendChild(btn);
    }
}

AJAX数据加载

结合AJAX实现无刷新翻页：

function loadPageData(page) {
    fetch(`/api/data?page=${page}`)
        .then(response => response.json())
        .then(data => {
            // 更新页面内容
            document.getElementById('content').innerHTML = data.content;
            currentPage = page;
        });
}

无限滚动翻页

实现无限滚动效果：

window.addEventListener('scroll', () => {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 500) {
        loadNextPage();
    }
});

let isLoading = false;
function loadNextPage() {
    if (isLoading) return;
    isLoading = true;

    fetch(`/api/data?page=${currentPage + 1}`)
        .then(response => response.json())
        .then(data => {
            // 追加新内容
            document.getElementById('content').insertAdjacentHTML('beforeend', data.content);
            currentPage++;
            isLoading = false;
        });
}

使用框架实现（Vue示例）

在Vue中实现分页组件：

Vue.component('pagination', {
    props: ['totalPages', 'currentPage'],
    template: `
        <div class="pagination">
            <button @click="$emit('page-change', currentPage - 1)" :disabled="currentPage <= 1">Prev</button>
            <span v-for="page in pages" :key="page">
                <button @click="$emit('page-change', page)" :class="{active: page === currentPage}">{{ page }}</button>
            </span>
            <button @click="$emit('page-change', currentPage + 1)" :disabled="currentPage >= totalPages">Next</button>
        </div>
    `,
    computed: {
        pages() {
            const range = [];
            for (let i = 1; i <= this.totalPages; i++) {
                range.push(i);
            }
            return range;
        }
    }
});