如何用React Swiper实现同一组件的三种状态滑动切换？

方案一：自由滑动+实时位置控制（单slide，同一组件DOM） #

适合需要同一组件在视口内平滑滑动切换位置的场景，无需多slide，通过监听Swiper滑动偏移量动态控制组件位置。

代码示例 #

import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import { FreeMode } from 'swiper/modules';
import { useState } from 'react';

const SlideableSingleComponent = () => {
  const [offsetY, setOffsetY] = useState(0);
  // 组件高度，根据实际需求调整
  const COMPONENT_HEIGHT = 400;

  return (
    <Swiper
      direction="vertical"
      freeMode={true}
      slidesPerView={1}
      spaceBetween={0}
      modules={[FreeMode]}
      style={{ height: '100vh' }}
      // 实时监听滑动偏移
      onProgress={(swiper) => {
        // 限制偏移范围，避免组件滑出视口
        const clampedOffset = Math.max(-COMPONENT_HEIGHT, Math.min(0, swiper.translate));
        setOffsetY(clampedOffset);
      }}
    >
      <SwiperSlide style={{ height: '100vh', position: 'relative' }}>
        {/* 同一组件，通过transform控制垂直位置 */}
        <div
          style={{
            position: 'absolute',
            top: '50%',
            left: '50%',
            transform: `translate(-50%, ${offsetY}px)`,
            transition: 'transform 0.3s ease',
            width: '300px',
            height: COMPONENT_HEIGHT,
            backgroundColor: '#fff',
            boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          可滑动的同一组件
        </div>
      </SwiperSlide>
    </Swiper>
  );
};

export default SlideableSingleComponent;

方案二：虚拟滑动+组件复用（模拟多位置，同一组件逻辑） #

如果需要模拟类似多slide切换的效果，但希望复用同一组件的逻辑（而非重复写多个组件），可以用Swiper的虚拟滑动模块，所有slide渲染同一组件。

代码示例 #

import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import { Virtual } from 'swiper/modules';

// 复用的核心组件
const ReusableComponent = ({ position }) => {
  // 可根据位置动态调整样式/内容，组件逻辑完全复用
  const bgColor = position % 2 === 0 ? '#f5f5f5' : '#e8e8e8';
  return (
    <div 
      style={{ 
        height: '100vh', 
        display: 'flex', 
        alignItems: 'center', 
        justifyContent: 'center',
        backgroundColor: bgColor
      }}
    >
      同一组件 - 位置 {position + 1}
    </div>
  );
};

const VirtualSlideReuse = () => {
  // 模拟3个切换位置，可按需调整数量
  const positionCount = 3;

  return (
    <Swiper
      direction="vertical"
      slidesPerView={1}
      spaceBetween={0}
      modules={[Virtual]}
      virtual
      style={{ height: '100vh' }}
    >
      {Array.from({ length: positionCount }).map((_, idx) => (
        <SwiperSlide key={idx} virtualIndex={idx}>
          <ReusableComponent position={idx} />
        </SwiperSlide>
      ))}
    </Swiper>
  );
};

export default VirtualSlideReuse;

关键优化点 #

• 方案一中，若需要固定位置切换（而非平滑跟随），可在onSlideChange中判断偏移量，设置固定的offsetY值（如0或-COMPONENT_HEIGHT）；
• 可调整Swiper的freeMode.momentum、freeMode.sticky参数，优化滑动惯性和吸附效果；
• 方案二中，虚拟滑动只会渲染当前视口及前后少量slide，性能更优，适合多位置切换场景。

内容的提问来源于stack exchange，提问作者regui