当前位置：首页 > React

react实现下拉刷新

2026-01-27 16:47:59React

实现下拉刷新的基本思路

在React中实现下拉刷新功能，通常需要监听触摸事件或滚动事件，检测用户下拉动作，触发数据重新加载。核心逻辑包括触摸位置追踪、下拉距离计算和刷新状态管理。

使用原生事件监听

通过touchstart、touchmove和touchend事件实现基础下拉检测：

import React, { useState, useRef } from 'react';

function PullToRefresh() {
  const [loading, setLoading] = useState(false);
  const [startY, setStartY] = useState(0);
  const [distance, setDistance] = useState(0);
  const containerRef = useRef(null);

  const handleRefresh = () => {
    setLoading(true);
    // 模拟数据加载
    setTimeout(() => {
      setLoading(false);
      setDistance(0);
    }, 1500);
  };

  const onTouchStart = (e) => {
    const touchY = e.touches[0].clientY;
    setStartY(touchY);
  };

  const onTouchMove = (e) => {
    const touchY = e.touches[0].clientY;
    const scrollTop = document.documentElement.scrollTop;

    // 仅在页面顶部时触发下拉
    if (scrollTop === 0) {
      const diff = touchY - startY;
      if (diff > 0) {
        e.preventDefault();
        setDistance(Math.min(diff, 100));
      }
    }
  };

  const onTouchEnd = () => {
    if (distance > 60) {
      handleRefresh();
    } else {
      setDistance(0);
    }
  };

  return (
    <div
      ref={containerRef}
      onTouchStart={onTouchStart}
      onTouchMove={onTouchMove}
      onTouchEnd={onTouchEnd}
      style={{ position: 'relative' }}
    >
      <div style={{
        height: `${distance}px`,
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        overflow: 'hidden'
      }}>
        {loading ? '加载中...' : '下拉刷新'}
      </div>
      {/* 页面内容 */}
    </div>
  );
}

使用第三方库

推荐使用成熟的React下拉刷新库简化实现：

react-pull-to-refresh：

npm install react-pull-to-refresh


import PullToRefresh from 'react-pull-to-refresh';

function App() { const handleRefresh = () => { return new Promise((resolve) => { setTimeout(resolve, 1000); }); };

react实现下拉刷新

return (

{/* 页面内容 */} ); } ```

react-simple-pull-to-refresh：

npm install react-simple-pull-to-refresh


import PullToRefresh from 'react-simple-pull-to-refresh';

function App() { const [data, setData] = useState(/初始数据/);

react实现下拉刷新

const handleRefresh = () => { return fetchNewData().then(newData => { setData(newData); }); };

return (

{/* 渲染data数据 */} ); } ```

自定义动画效果

通过CSS Transition增强用户体验：

.refresh-control {
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.4, 1);
}
.loading-spinner {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}