当前位置：首页 > JavaScript

js实现上拉加载

2026-04-04 03:58:41JavaScript

上拉加载的实现方法

上拉加载是一种常见的分页加载技术，通过监听滚动事件判断是否到达页面底部，触发数据加载。以下是几种实现方式：

监听滚动事件

通过计算滚动条位置、可视区域高度和文档总高度判断是否到达底部：

js实现上拉加载

window.addEventListener('scroll', function() {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  const windowHeight = window.innerHeight;
  const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

  if (scrollTop + windowHeight >= scrollHeight - 50) {
    loadMoreData();
  }
});

function loadMoreData() {
  // 数据加载逻辑
  console.log('Loading more data...');
}

Intersection Observer API

更现代的实现方式，性能优于滚动事件监听：

const observer = new IntersectionObserver((entries) => {
  if (entries[0].isIntersecting) {
    loadMoreData();
  }
});

const sentinel = document.createElement('div');
document.body.appendChild(sentinel);
observer.observe(sentinel);

function loadMoreData() {
  // 数据加载逻辑
  // 加载完成后需要重新创建新的哨兵元素
}

使用第三方库

可以考虑使用现成的库如infinite-scroll：

js实现上拉加载

import InfiniteScroll from 'infinite-scroll';

const infScroll = new InfiniteScroll('.container', {
  path: '.next-page-link',
  append: '.item',
  history: false,
});

优化注意事项

添加防抖机制避免频繁触发
```
let isLoading = false;
```

function loadMoreData() { if (isLoading) return;

isLoading = true; // 异步加载数据 fetchData().then(() => { isLoading = false; }); }


- 移动端需要考虑弹性滚动问题
- 加载状态需要明确提示用户
- 数据全部加载完成后应移除监听

### 完整示例代码
```javascript
let currentPage = 1;
let isLoading = false;
let hasMore = true;

function initInfiniteScroll() {
  window.addEventListener('scroll', debounce(checkScroll, 200));
}

function checkScroll() {
  if (!hasMore || isLoading) return;

  const { scrollTop, clientHeight, scrollHeight } = document.documentElement;
  const isBottom = scrollTop + clientHeight >= scrollHeight - 100;

  if (isBottom) {
    loadData();
  }
}

async function loadData() {
  isLoading = true;
  showLoadingIndicator();

  try {
    const newData = await fetch(`/api/data?page=${currentPage}`);
    renderData(newData);
    currentPage++;
    hasMore = newData.length >= 10;
  } catch (error) {
    showError(error);
  } finally {
    isLoading = false;
    hideLoadingIndicator();
  }
}

function debounce(fn, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, arguments), delay);
  };
}