当前位置：首页 > JavaScript

js实现上划翻页

2026-03-16 06:58:01JavaScript

实现上划翻页的基本思路

上划翻页通常通过监听用户的滑动事件来实现，当用户滑动到页面底部时加载下一页内容。以下是一个基于JavaScript的实现方法。

监听滚动事件

通过监听窗口的滚动事件，判断用户是否滚动到页面底部。

js实现上划翻页

window.addEventListener('scroll', function() {
    // 检查是否滚动到页面底部
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
        loadNextPage();
    }
});

加载下一页内容

定义一个函数来加载下一页内容，可以通过AJAX或Fetch API从服务器获取数据。

js实现上划翻页

function loadNextPage() {
    // 防止重复加载
    if (isLoading) return;
    isLoading = true;

    fetch('/api/next-page')
        .then(response => response.json())
        .then(data => {
            // 将新内容添加到页面
            appendContent(data);
            isLoading = false;
        })
        .catch(error => {
            console.error('Error loading next page:', error);
            isLoading = false;
        });
}

添加新内容到页面

将获取的新内容动态添加到页面中。

function appendContent(data) {
    const container = document.getElementById('content-container');
    data.forEach(item => {
        const element = document.createElement('div');
        element.textContent = item.content;
        container.appendChild(element);
    });
}

防抖处理

为了避免滚动事件频繁触发，可以使用防抖（debounce）技术优化性能。

let debounceTimer;
window.addEventListener('scroll', function() {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => {
        if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
            loadNextPage();
        }
    }, 200);
});

完整示例代码

let isLoading = false;

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

    fetch('/api/next-page')
        .then(response => response.json())
        .then(data => {
            appendContent(data);
            isLoading = false;
        })
        .catch(error => {
            console.error('Error loading next page:', error);
            isLoading = false;
        });
}

function appendContent(data) {
    const container = document.getElementById('content-container');
    data.forEach(item => {
        const element = document.createElement('div');
        element.textContent = item.content;
        container.appendChild(element);
    });
}

let debounceTimer;
window.addEventListener('scroll', function() {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => {
        if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
            loadNextPage();
        }
    }, 200);
});