使用JavaScript实现一个简单的下拉刷新功能_javascript移动端-js教程-PHP中文网

使用JavaScript实现一个简单的下拉刷新功能_javascript移动端

狼影

发布： 2025-10-29 23:07:02

原创

652人浏览过

下拉刷新通过监听touch事件实现，当页面顶部下拉超过阈值时触发数据更新。首先监测touchstart确定起始点，touchmove计算下拉距离并动态调整刷新头的位移与提示文本，达到60px阈值时显示“释放立即刷新”，touchend松手后若满足条件则执行doRefresh函数发起请求，期间通过preventDefault阻止默认滚动，利用transform控制视觉反馈，最后恢复状态。该方案无需框架，兼容性好，可通过添加loading动画、封装组件或集成防抖进一步优化体验。

使用javascript实现一个简单的下拉刷新功能_javascript移动端

下拉刷新是一种在移动端常见的交互方式，用户通过下拉页面来触发数据刷新。使用原生 JavaScript 可以轻松实现这一功能，无需依赖框架。下面是一个简单、可运行的实现方案。

1. 基本原理

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

关键点包括：

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

2. HTML 结构

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

立即学习“Java免费学习笔记（深入）”；

<div id="refresh-container">
  <div id="refresh-header">
    下拉刷新...
  </div>
  <div id="content">
    <p>数据内容...</p>
  </div>
</div>

登录后复制

3. CSS 样式

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

极简智能王

极简智能- 智能聊天AI绘画，还可以创作、编写、翻译、写代码等多种功能，满足用户生活和工作的多方面需求

查看详情

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

登录后复制

4. JavaScript 实现

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

(function() {
  const header = document.getElementById('refresh-header');
  const content = document.getElementById('content');
  let startY = 0;
  let currentY = 0;
  let isPulling = false;
<p>// 模拟刷新操作
function doRefresh() {
header.textContent = '加载中...';
// 模拟异步请求
setTimeout(() => {
header.textContent = '刷新完成';
setTimeout(() => {
header.style.transform = 'translateY(-50px)';
header.textContent = '下拉刷新...';
}, 800);
}, 1000);
}</p><p>content.addEventListener('touchstart', (e) => {
if (content.offsetTop === 0) {
startY = e.touches[0].clientY;
isPulling = true;
}
});</p><p>content.addEventListener('touchmove', (e) => {
if (!isPulling) return;
currentY = e.touches[0].clientY;
const diff = currentY - startY;</p><pre class='brush:php;toolbar:false;'>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)'; } }); })();