当前位置：首页 > article >正文

移动端实现下拉刷新和上拉加载（内含案例）

article 2024/10/10 1:21:19

在前端开发中，上拉加载和下拉刷新常用于实现内容的动态加载，尤其在移动端的应用中。下面我将提供一个简单的示例和逻辑说明。

1. 逻辑说明：

下拉刷新：
- 用户向下拖动页面顶部，触发一个事件，刷新当前内容。
- 需要检测页面的 scrollTop 为 0 时的拖动行为。
上拉加载：
- 用户滚动到页面底部时，触发数据加载事件，加载更多内容。
- 需要检测页面的 scrollHeight 和 clientHeight 之间的距离接近为 0 时的滚动行为。

2. 案例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>上拉加载 & 下拉刷新</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
    }
    #content {
      height: 100vh;
      overflow-y: auto;
    }
    .item {
      padding: 20px;
      border-bottom: 1px solid #ccc;
    }
    .loading {
      text-align: center;
      padding: 20px;
      display: none;
    }
  </style>
</head>
<body>
  <div id="content">
    <div id="items"></div>
    <div class="loading" id="loading">加载中...</div>
  </div>

  <script>
    const content = document.getElementById('content');
    const items = document.getElementById('items');
    const loading = document.getElementById('loading');

    // 模拟初始内容加载
    let page = 1;
    function loadItems() {
      for (let i = 0; i < 10; i++) {
        const div = document.createElement('div');
        div.className = 'item';
        div.innerText = 'Item ' + (items.children.length + 1);
        items.appendChild(div);
      }
    }
    loadItems();

    // 下拉刷新
    let startY = 0;
    content.addEventListener('touchstart', (e) => {
      if (content.scrollTop === 0) {
        startY = e.touches[0].pageY;
      }
    });

    content.addEventListener('touchmove', (e) => {
      const moveY = e.touches[0].pageY;
      if (moveY - startY > 100 && content.scrollTop === 0) {
        // 模拟刷新操作
        alert('刷新页面');
        items.innerHTML = '';
        loadItems();
      }
    });

    // 上拉加载更多
    content.addEventListener('scroll', () => {
      if (content.scrollTop + content.clientHeight >= content.scrollHeight) {
        loading.style.display = 'block';
        setTimeout(() => {
          loadItems();
          loading.style.display = 'none';
        }, 1000); // 模拟加载延迟
      }
    });
  </script>
</body>
</html>

3. 逻辑详细说明：

下拉刷新：
- 通过 touchstart 获取用户的起始触摸点，并在 touchmove 事件中判断是否有下拉行为（页面滚动条处于顶部时）。
- 一旦检测到下拉超过一定距离（如100px），执行刷新操作，如重新加载页面内容。
上拉加载：
- 通过 scroll 事件监测用户的滚动行为，检测当前滚动条位置是否接近页面底部。
- 当 scrollTop + clientHeight 等于或超过 scrollHeight 时，触发加载更多内容的操作，显示“加载中”提示，并在短暂延迟后加载更多数据。