当前位置：首页 > JavaScript

js实现下拉加载

2026-03-01 17:55:05JavaScript

实现下拉加载的基本思路

监听滚动事件，判断是否滚动到页面底部。当滚动到底部时触发数据加载，更新页面内容。

核心代码实现

// 监听滚动事件
window.addEventListener('scroll', function() {
  // 文档总高度
  const scrollHeight = document.documentElement.scrollHeight;
  // 可视区域高度
  const clientHeight = document.documentElement.clientHeight;
  // 滚动条距离顶部高度
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

  // 判断是否滚动到底部
  if (scrollTop + clientHeight >= scrollHeight - 50) {
    loadMoreData();
  }
});

// 加载更多数据
let isLoading = false;
let currentPage = 1;

async function loadMoreData() {
  if (isLoading) return;

  isLoading = true;
  // 显示加载动画
  showLoadingIndicator();

  try {
    // 获取数据
    const newData = await fetchData(currentPage + 1);
    // 渲染数据
    renderData(newData);
    currentPage++;
  } catch (error) {
    console.error('加载失败:', error);
  } finally {
    isLoading = false;
    // 隐藏加载动画
    hideLoadingIndicator();
  }
}

优化性能的方法

使用节流函数减少滚动事件触发频率

function throttle(func, delay) {
  let lastTime = 0;
  return function() {
    const now = Date.now();
    if (now - lastTime >= delay) {
      func.apply(this, arguments);
      lastTime = now;
    }
  };
}

// 使用节流函数优化滚动监听
window.addEventListener('scroll', throttle(function() {
  // 滚动判断逻辑
}, 200));

数据加载和渲染示例

// 模拟获取数据
async function fetchData(page) {
  const response = await fetch(`/api/data?page=${page}`);
  return response.json();
}

// 渲染数据到页面
function renderData(data) {
  const container = document.getElementById('content-container');
  data.forEach(item => {
    const element = document.createElement('div');
    element.className = 'item';
    element.textContent = item.content;
    container.appendChild(element);
  });
}

加载状态提示

function showLoadingIndicator() {
  const loader = document.createElement('div');
  loader.id = 'loading-indicator';
  loader.textContent = '加载中...';
  document.body.appendChild(loader);
}

function hideLoadingIndicator() {
  const loader = document.getElementById('loading-indicator');
  if (loader) {
    loader.remove();
  }
}

注意事项

避免重复加载：使用isLoading标志位防止并发请求
错误处理：添加try-catch捕获网络请求异常
无更多数据提示：当服务器返回空数据时显示"没有更多内容"
移动端适配：考虑移动设备的滚动特性
内存管理：大量数据时考虑虚拟滚动技术

完整实现示例

<div id="content-container"></div>

<script>
  // 初始化变量
  let isLoading = false;
  let currentPage = 1;
  const container = document.getElementById('content-container');

  // 初始加载
  loadMoreData();

  // 滚动监听
  window.addEventListener('scroll', throttle(function() {
    const scrollHeight = document.documentElement.scrollHeight;
    const clientHeight = document.documentElement.clientHeight;
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

    if (scrollTop + clientHeight >= scrollHeight - 100) {
      loadMoreData();
    }
  }, 200));

  // 加载数据函数
  async function loadMoreData() {
    if (isLoading) return;

    isLoading = true;
    showLoadingIndicator();

    try {
      const response = await fetch(`https://api.example.com/items?page=${currentPage}`);
      const data = await response.json();

      if (data.length === 0) {
        showNoMoreData();
        return;
      }

      data.forEach(item => {
        const element = document.createElement('div');
        element.className = 'item';
        element.textContent = item.title;
        container.appendChild(element);
      });

      currentPage++;
    } catch (error) {
      console.error('加载失败:', error);
      showError();
    } finally {
      isLoading = false;
      hideLoadingIndicator();
    }
  }

  // 辅助函数
  function throttle(func, delay) {
    let lastTime = 0;
    return function() {
      const now = Date.now();
      if (now - lastTime >= delay) {
        func.apply(this, arguments);
        lastTime = now;
      }
    };
  }

  function showLoadingIndicator() {
    // 实现加载提示
  }

  function hideLoadingIndicator() {
    // 隐藏加载提示
  }

  function showNoMoreData() {
    // 显示没有更多数据
  }

  function showError() {
    // 显示错误信息
  }
</script>

js实现下拉加载