JS实现滚动触底实现（附：PC端滚动分页加载数据）

// 初始化参数
let loading = false; // 检查是否正在加载
let pageIndex = 0; // 当前页码
let totalPage = 0; // 总页数
 
// 模拟数据加载函数
function loadData() {
    if (loading) return; // 如果正在加载，则返回
    loading = true; // 设置正在加载状态
 
    // 模拟Ajax请求数据
    setTimeout(() => {
        // 模拟数据加载成功，更新页码和数据
        pageIndex += 1;
        // 模拟数据加载完毕，取消加载状态
        loading = false;
    }, 1000);
}
 
// 监听滚动事件
window.onscroll = function() {
    // 获取页面滚动高度
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    // 获取视窗高度
    const windowHeight = window.innerHeight;
    // 获取文档高度
    const documentHeight = document.documentElement.scrollHeight;
 
    // 检查是否到达底部
    if (scrollTop + windowHeight === documentHeight) {
        // 检查是否还有更多数据需要加载
        if (pageIndex < totalPage) {
            loadData(); // 加载更多数据
        }
    }
};

这段代码实现了一个简单的滚动触底加载数据的功能。它首先初始化了一些参数，然后定义了loadData函数来模拟数据加载，并设置了一个事件处理函数来监听滚动事件。当用户滚动到页面底部时，会检查是否还有更多数据需要加载，如果是的话，则调用loadData函数来获取新的数据。这个例子使用了一个简单的逻辑来检测用户是否已经滚动到页面底部，并且没有正在进行的加载操作。在实际应用中，你需要替换loadData函数中的模拟Ajax请求为实际的数据加载逻辑，并且需要根据实际的后端API来处理数据加载成功和失败的情况。