如何通过JavaScript实现下拉刷新功能？

下拉刷新的实现原理

下拉刷新的核心逻辑是通过监听用户在页面上的触摸操作，记录手指移动的距离，当移动距离超过设定的阈值时，触发数据刷新逻辑，刷新完成后恢复页面状态。整个过程主要涉及触摸事件监听、距离计算、状态管理、动画反馈和异步请求五个部分。

核心事件与状态定义

我们需要监听三个触摸相关的事件：touchstart记录触摸起始位置，touchmove实时计算下拉距离，touchend判断是否满足刷新条件。同时定义三个状态：初始状态、下拉中、刷新中，避免重复触发逻辑。

基础HTML结构

首先搭建基础的页面结构，包含一个下拉提示区域和内容列表区域：

<div class="refresh-container">
  <div class="refresh-tip">下拉刷新</div>
  <ul class="content-list">
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
  </ul>
</div>

CSS样式配置

为容器和提示区域添加基础样式，提示区域默认隐藏，通过JS动态控制显示和偏移：

.refresh-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.refresh-tip {
  position: absolute;
  top: -50px;
  left: 0;
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: #f5f5f5;
  transition: top 0.2s ease;
}
.content-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.content-list li {
  padding: 15px;
  border-bottom: 1px solid #eee;
}

JavaScript核心实现逻辑

变量初始化

首先定义需要的变量，记录触摸起始位置、当前下拉距离、刷新阈值和当前状态：

// 获取DOM元素
const container = document.querySelector('.refresh-container');
const refreshTip = document.querySelector('.refresh-tip');
const contentList = document.querySelector('.content-list');

// 状态变量
let startY = 0; // 触摸起始Y坐标
let currentY = 0; // 当前触摸Y坐标
let pullDistance = 0; // 下拉距离
const refreshThreshold = 50; // 触发刷新的阈值，单位px
let isRefreshing = false; // 是否正在刷新
let isPulling = false; // 是否正在下拉

触摸事件监听

分别监听三个触摸事件，处理对应的逻辑：

// 触摸开始事件
container.addEventListener('touchstart', (e) => {
  // 如果正在刷新，不处理触摸逻辑
  if (isRefreshing) return;
  // 记录起始Y坐标，使用第一个触摸点的clientY
  startY = e.touches[0].clientY;
  isPulling = true;
});

// 触摸移动事件
container.addEventListener('touchmove', (e) => {
  if (!isPulling || isRefreshing) return;
  // 获取当前触摸Y坐标
  currentY = e.touches[0].clientY;
  // 计算下拉距离，只有向下拉的时候才计算
  pullDistance = currentY - startY;
  if (pullDistance > 0) {
    // 限制最大下拉距离为100px
    const limitedDistance = Math.min(pullDistance, 100);
    // 更新提示区域位置
    refreshTip.style.top = `${limitedDistance - 50}px`;
    // 根据下拉距离更新提示文字
    if (limitedDistance >= refreshThreshold) {
      refreshTip.textContent = '释放立即刷新';
    } else {
      refreshTip.textContent = '下拉刷新';
    }
  }
});

// 触摸结束事件
container.addEventListener('touchend', () => {
  if (!isPulling || isRefreshing) return;
  isPulling = false;
  // 判断是否满足刷新条件
  if (pullDistance >= refreshThreshold) {
    startRefresh();
  } else {
    // 不满足刷新条件，恢复提示区域位置
    resetTip();
  }
});

刷新逻辑与重置

当满足刷新条件时，触发刷新逻辑，模拟异步请求数据，完成后重置状态：

// 开始刷新
function startRefresh() {
  isRefreshing = true;
  refreshTip.textContent = '正在刷新...';
  refreshTip.style.top = '0px';
  // 模拟异步请求，1秒后返回数据
  setTimeout(() => {
    // 模拟新增列表项
    const newItem = document.createElement('li');
    newItem.textContent = `新列表项 ${Date.now()}`;
    // 插入到列表最前面
    contentList.insertBefore(newItem, contentList.firstChild);
    // 刷新完成，重置状态
    resetTip();
    isRefreshing = false;
  }, 1000);
}

// 重置提示区域
function resetTip() {
  refreshTip.style.top = '-50px';
  refreshTip.textContent = '下拉刷新';
  pullDistance = 0;
}

适配与优化建议

上述实现是基础版本，实际使用中可以根据需求做以下优化：

• 增加阻尼效果，下拉距离越大，位移增长越慢，提升手感
• 添加加载动画，比如在刷新提示区域加入旋转的小图标
• 判断页面是否处于顶部，只有页面滚动到最顶部时才触发下拉刷新，避免和页面滚动冲突
• 适配PC端鼠标事件，同时监听mousedown、mousemove、mouseup事件，覆盖更多使用场景

常见问题说明

问：为什么下拉的时候页面会跟着滚动？
答：可以在touchmove事件中判断，如果正在下拉且未触发刷新，调用e.preventDefault()阻止默认滚动行为，但要注意不要影响其他正常滚动场景。

问：如何修改刷新阈值？
答：直接修改refreshThreshold变量的值即可，单位是像素，根据实际需求调整大小。

JavaScript下拉刷新touch_eventpull_to_refresh修改时间：2026-07-23 13:54:15