当前位置：首页 > JavaScript

js实现下拉刷新

2026-01-15 15:02:03JavaScript

监听触摸事件

通过监听 touchstart、touchmove 和 touchend 事件来检测用户下拉手势。记录触摸起始位置和移动距离。

js实现下拉刷新

let startY = 0;
let currentY = 0;

document.addEventListener('touchstart', (e) => {
  startY = e.touches[0].clientY;
});

document.addEventListener('touchmove', (e) => {
  currentY = e.touches[0].clientY;
  const distance = currentY - startY;

  if (distance > 0 && window.scrollY === 0) {
    e.preventDefault();
    updateRefreshUI(distance);
  }
});

document.addEventListener('touchend', (e) => {
  const distance = currentY - startY;
  if (distance > 100) { // 触发刷新的阈值
    triggerRefresh();
  } else {
    resetRefreshUI();
  }
});

更新下拉刷新UI

根据下拉距离动态更新UI，如下拉提示文本或加载动画。

js实现下拉刷新

function updateRefreshUI(distance) {
  const refreshElement = document.getElementById('refresh-element');
  refreshElement.style.transform = `translateY(${distance}px)`;

  if (distance > 100) {
    refreshElement.textContent = '释放刷新';
  } else {
    refreshElement.textContent = '下拉刷新';
  }
}

触发刷新动作

当用户下拉超过阈值时执行数据刷新操作，通常是一个异步请求。

function triggerRefresh() {
  const refreshElement = document.getElementById('refresh-element');
  refreshElement.textContent = '加载中...';

  fetchNewData().then(() => {
    resetRefreshUI();
  });
}

async function fetchNewData() {
  // 模拟异步请求
  return new Promise(resolve => {
    setTimeout(() => {
      console.log('数据已更新');
      resolve();
    }, 1500);
  });
}

重置UI状态

刷新完成后或取消下拉时恢复初始状态。

function resetRefreshUI() {
  const refreshElement = document.getElementById('refresh-element');
  refreshElement.style.transform = 'translateY(0)';
  refreshElement.textContent = '下拉刷新';
  startY = 0;
  currentY = 0;
}

完整HTML结构示例

<!DOCTYPE html>
<html>
<head>
  <style>
    #refresh-element {
      position: fixed;
      top: -50px;
      width: 100%;
      text-align: center;
      padding: 15px 0;
      background: #f5f5f5;
      transition: transform 0.2s;
    }
    .content {
      padding: 20px;
      height: 200vh;
    }
  </style>
</head>
<body>
  <div id="refresh-element">下拉刷新</div>
  <div class="content">页面内容区域</div>
  <script>
    // 上述JavaScript代码
  </script>
</body>
</html>