移动端如何实现下拉滚动加载(顶部加载)-CSDN博客

在移动端实现下拉滚动加载（顶部加载）功能，通常涉及监听滚动事件、判断滚动位置，并在达到特定条件时触发数据加载。以下是实现步骤：

1. 监听滚动事件

使用 scroll 事件监听页面滚动。

window.addEventListener('scroll', function() {
    // 判断是否滚动到顶部
});

2. 判断滚动位置

检查滚动条是否接近或到达页面顶部。

window.addEventListener('scroll', function() {
    if (window.scrollY <= 0) {
        // 触发加载
    }
});

3. 触发加载

滚动到顶部时，执行加载数据的操作。

function loadMoreData() {
    // 加载数据的逻辑
}

window.addEventListener('scroll', function() {
    if (window.scrollY <= 0) {
        loadMoreData();
    }
});

4. 防止重复加载

使用标志位避免重复加载。

let isLoading = false;

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

    // 模拟异步加载
    setTimeout(function() {
        // 加载数据
        isLoading = false;
    }, 1000);
}

window.addEventListener('scroll', function() {
    if (window.scrollY <= 0 && !isLoading) {
        loadMoreData();
    }
});

5. 优化性能

使用防抖或节流减少 scroll 事件的触发频率。

function throttle(func, wait) {
    let timeout = null;
    return function() {
        if (!timeout) {
            timeout = setTimeout(() => {
                func.apply(this, arguments);
                timeout = null;
            }, wait);
        }
    };
}

window.addEventListener('scroll', throttle(function() {
    if (window.scrollY <= 0 && !isLoading) {
        loadMoreData();
    }
}, 200));

6. 更新页面内容

加载数据后，更新页面内容并调整滚动位置。

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

    // 模拟异步加载
    setTimeout(function() {
        const newContent = document.createElement('div');
        newContent.textContent = '新内容';
        document.body.insertBefore(newContent, document.body.firstChild);

        // 调整滚动位置
        window.scrollTo(0, newContent.offsetHeight);

        isLoading = false;
    }, 1000);
}

7. 兼容性处理

确保代码在不同设备和浏览器上正常运行。

const scrollTop = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;

if (scrollTop <= 0 && !isLoading) {
    loadMoreData();
}