js下拉加载分页

在 JavaScript 中实现下拉加载分页可以通过以下方式完成：

1. 监听滚动事件：使用 window 对象的 scroll 事件来监听滚动条的位置。

2. 判断滚动到底部：在滚动事件中，判断当前滚动条的位置是否接近页面底部，例如距离页面底部还有一定的距离进行触发加载。

3. 发起异步请求：当滚动到底部时，使用 XMLHttpRequest 或 Fetch API 发起异步请求获取下一页的数据。

4. 处理返回数据：在异步请求的回调函数中，处理获取到的数据，并将其插入到页面中已有的内容后面，实现无限下拉加载的效果。

下面是一个简单的示例代码实现：

let page = 1; // 当前页数

function loadNextPage() {
  // 发起异步请求，获取下一页数据
  fetch(`/api/data?page=${page}`)
    .then((response) => response.json())
    .then((data) => {
      // 处理返回的数据
      const dataList = data.list;
      const container = document.getElementById('data-container');

      // 将数据插入到页面中
      dataList.forEach((item) => {
        const newItem = document.createElement('div');
        newItem.textContent = item;
        container.appendChild(newItem);
      });

      // 更新页数
      page++;
    })
    .catch((error) => {
      console.error('Error:', error);
    });
}

// 监听滚动事件
window.addEventListener('scroll', () => {
  // 判断是否滚动到底部
  if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 500) {
    loadNextPage();
  }
});

在这个示例中，当滚动条距离页面底部不足 500px 时会触发加载下一页的数据。你可以根据实际需求来调整这个阈值。

注意：上述示例仅为简单示例，实际情况中还需要处理错误、防止重复加载等边界情况。另外，具体的接口请求和数据处理逻辑需要根据你的应用场景来设计和实现。