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

#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>

(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)'; } }); })();