当前位置：首页 > 文章列表 > 文章 > 前端 > 移动端下拉刷新实现教程

移动端下拉刷新实现教程

2025-11-13 21:48:39 0浏览收藏

1. 基本原理

下拉刷新的核心思路是监听用户的下拉手势，当页面处于顶部并继续下拉时，显示一个刷新提示区域，达到一定阈值后触发刷新逻辑。

关键点包括：

监听页面的 touch 事件（touchstart、touchmove、touchend）
判断是否在页面顶部开始下拉
计算下拉距离，控制刷新区域的显示和高度
满足条件后执行刷新，并恢复状态

2. HTML 结构

需要一个用于显示刷新状态的头部区域和内容容器：


  
    下拉刷新...
  
  
    数据内容...

3. CSS 样式

为刷新区域设置初始隐藏样式，并支持过渡动画：

#refresh-container {
  position: relative;
  overflow: hidden;
  height: 100vh;
}
refresh-header {
height: 50px;
line-height: 50px;
text-align: center;
background: #f3f3f3;
color: #666;
transform: translateY(-50px);
transition: transform 0.3s;
}
refresh-header.active {
transform: translateY(0);
}
content {
padding: 10px;
}

4. JavaScript 实现

绑定触摸事件，实现下拉检测和刷新逻辑：

(function() {
  const header = document.getElementById('refresh-header');
  const content = document.getElementById('content');
  let startY = 0;
  let currentY = 0;
  let isPulling = false;
// 模拟刷新操作
function doRefresh() {
header.textContent = '加载中...';
// 模拟异步请求
setTimeout(() => {
header.textContent = '刷新完成';
setTimeout(() => {
header.style.transform = 'translateY(-50px)';
header.textContent = '下拉刷新...';
}, 800);
}, 1000);
}
content.addEventListener('touchstart', (e) => {
if (content.offsetTop === 0) {
startY = e.touches[0].clientY;
isPulling = true;
}
});
content.addEventListener('touchmove', (e) => {
if (!isPulling) return;
currentY = e.touches[0].clientY;
const diff = currentY - startY;
if (diff > 0) {
  e.preventDefault();
  header.style.transform = `translateY(${Math.min(diff, 80) - 50}px)`;
  if (diff > 60) {
    header.textContent = '释放立即刷新';
  } else {
    header.textContent = '下拉刷新...';
  }
}
});
content.addEventListener('touchend', () => {
isPulling = false;
const diff = currentY - startY;
if (diff > 60) {
header.style.transform = 'translateY(0)';
doRefresh();
} else {
header.style.transform = 'translateY(-50px)';
}
});
})();