当前位置：首页 > React

react如何实现滑动切换

2026-03-10 23:37:57React

实现滑动切换的基本思路

在React中实现滑动切换效果通常需要结合触摸事件（onTouchStart、onTouchMove、onTouchEnd）和CSS过渡/动画。核心逻辑是通过监听用户滑动操作，动态调整内容位置，并在滑动结束时触发切换。

使用原生事件实现滑动切换

创建一个组件，监听触摸事件并计算滑动距离：

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

const SwipeComponent = ({ children }) => {
  const [position, setPosition] = useState(0);
  const touchStartX = useRef(0);
  const currentX = useRef(0);
  const isSwiping = useRef(false);

  const handleTouchStart = (e) => {
    touchStartX.current = e.touches[0].clientX;
    isSwiping.current = true;
  };

  const handleTouchMove = (e) => {
    if (!isSwiping.current) return;
    currentX.current = e.touches[0].clientX;
    const diff = currentX.current - touchStartX.current;
    setPosition(diff);
  };

  const handleTouchEnd = () => {
    isSwiping.current = false;
    const threshold = 100;
    if (position > threshold) {
      // 向右滑动足够距离，切换到上一项
    } else if (position < -threshold) {
      // 向左滑动足够距离，切换到下一项
    }
    setPosition(0);
  };

  return (
    <div
      style={{ transform: `translateX(${position}px)` }}
      onTouchStart={handleTouchStart}
      onTouchMove={handleTouchMove}
      onTouchEnd={handleTouchEnd}
    >
      {children}
    </div>
  );
};

使用第三方库简化实现

对于更复杂的滑动场景，推荐使用现成的React滑动库：

react-swipeable：


import { useSwipeable } from 'react-swipeable';

function SwipeableComponent() { const handlers = useSwipeable({ onSwipedLeft: () => console.log('向左滑动'), onSwipedRight: () => console.log('向右滑动'), preventDefaultTouchmoveEvent: true, trackMouse: true });

return <div {...handlers}>可滑动内容; }


2. react-swipe（专门为轮播设计）：
```jsx
import Swipe from 'react-swipe';

const Carousel = () => (
  <Swipe>
    <div>第一页</div>
    <div>第二页</div>
    <div>第三页</div>
  </Swipe>
);

添加CSS过渡效果

为滑动切换添加平滑动画：

.swipe-container {
  transition: transform 0.3s ease-out;
  will-change: transform;
}

完整轮播组件示例

结合状态管理和滑动逻辑的完整实现：

react如何实现滑动切换

const SwipeCarousel = ({ items }) => {
  const [activeIndex, setActiveIndex] = useState(0);

  const swipeHandlers = useSwipeable({
    onSwipedLeft: () => 
      setActiveIndex((prev) => (prev + 1) % items.length),
    onSwipedRight: () => 
      setActiveIndex((prev) => (prev - 1 + items.length) % items.length)
  });

  return (
    <div className="carousel-container">
      <div {...swipeHandlers} className="slider">
        {items.map((item, index) => (
          <div 
            key={index}
            className={`slide ${index === activeIndex ? 'active' : ''}`}
          >
            {item.content}
          </div>
        ))}
      </div>
    </div>
  );
};