下拉刷新通过监听touch事件实现，当页面顶部下拉超过阈值时触发数据更新。首先监测touchstart确定起始点，touchmove计算下拉距离并动态调整刷新头的位移与提示文本，达到60px阈值时显示“释放立即刷新”，touchend松手后若满足条件则执行doRefresh函数发起请求，期间通过preventDefault阻止默认滚动，利用transform控制视觉反馈，最后恢复状态。该方案无需框架，兼容性好，可通过添加loading动画、封装组件或集成防抖进一步优化体验。
下拉刷新是一种在移动端常见的交互方式，用户通过下拉页面来触发数据刷新。使用原生 JavaScript 可以轻松实现这一功能，无需依赖框架。下面是一个简单、可运行的实现方案。
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)';
}
});
})();
'refresh-header');
const content = document.getElementById('content');
let startY = 0;
let currentY = 0;
let isPulling = false;
5. 使用说明与优化建议
这个实现适用于大多数移动端浏览器，具备良好的兼容性。你可以根据实际需求进行以下扩展：
- 加入 loading 动画（如旋转图标）提升体验
- 封装成独立组件便于复用
- 结合 Pull-to-refresh 库（如 pulltorefresh.js）实现更复杂功能
- 添加防抖机制避免频繁触发
基本上就这些，不复杂但容易忽略细节。核心是准确判断下拉起点和控制视觉反馈。移动端注意防止默认滚动行为干扰手势识别。调试时可在 touchmove 中打印坐标变化帮助定位问题。
