当前位置：首页 > React

React下拉刷新实现

2026-01-27 05:17:59React

使用 react-pull-to-refresh 库

安装 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);
    });
  };

  return (
    <PullToRefresh onRefresh={handleRefresh}>
      <div>下拉刷新内容</div>
    </PullToRefresh>
  );
}

自定义实现下拉刷新

监听 touch 事件实现基础下拉效果：

import { useState, useRef } from 'react';

function PullRefresh() {
  const [loading, setLoading] = useState(false);
  const startY = useRef(0);
  const [translateY, setTranslateY] = useState(0);

  const handleTouchStart = (e) => {
    startY.current = e.touches[0].pageY;
  };

  const handleTouchMove = (e) => {
    const y = e.touches[0].pageY;
    const diff = y - startY.current;
    if (diff > 0 && window.scrollY === 0) {
      setTranslateY(Math.min(diff, 100));
    }
  };

  const handleTouchEnd = () => {
    if (translateY > 60) {
      setLoading(true);
      // 执行刷新操作
      setTimeout(() => {
        setLoading(false);
        setTranslateY(0);
      }, 1000);
    } else {
      setTranslateY(0);
    }
  };

  return (
    <div
      onTouchStart={handleTouchStart}
      onTouchMove={handleTouchMove}
      onTouchEnd={handleTouchEnd}
      style={{ transform: `translateY(${translateY}px)` }}
    >
      {loading && <div>加载中...</div>}
      <div>页面内容</div>
    </div>
  );
}

使用 react-swipeable 库增强手势

安装依赖：

npm install react-swipeable

结合手势库实现：

import { useSwipeable } from 'react-swipeable';

function SwipeRefresh({ onRefresh }) {
  const [pull, setPull] = useState(0);

  const handlers = useSwipeable({
    onSwiping: (e) => {
      if (window.scrollY === 0 && e.dir === 'Down') {
        setPull(Math.min(e.deltaY, 100));
      }
    },
    onSwiped: () => {
      if (pull > 60) {
        onRefresh().then(() => setPull(0));
      } else {
        setPull(0);
      }
    }
  });

  return (
    <div {...handlers}>
      <div style={{ height: `${pull}px` }}>
        {pull > 60 ? '释放刷新' : '下拉刷新'}
      </div>
      <div>页面内容</div>
    </div>
  );
}

移动端优化建议

添加弹性动画效果：

.refresh-indicator {
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.4, 1);
}

防止页面滚动冲突：

React下拉刷新实现

useEffect(() => {
  const preventDefault = (e) => {
    if (translateY > 0) {
      e.preventDefault();
    }
  };
  document.addEventListener('touchmove', preventDefault, { passive: false });
  return () => document.removeEventListener('touchmove', preventDefault);
}, [translateY]);

标签: React