react实现卡片滑动

实现卡片滑动效果的方法

使用React-Slick库

React-Slick是一个基于Slick Carousel的React轮播组件库，适用于实现卡片滑动效果。安装React-Slick后，通过配置项自定义滑动行为。

import React from 'react';
import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

const CardSlider = () => {
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 3,
    slidesToScroll: 1,
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 2,
        }
      },
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 1,
        }
      }
    ]
  };

  return (
    <Slider {...settings}>
      <div><h3>Card 1</h3></div>
      <div><h3>Card 2</h3></div>
      <div><h3>Card 3</h3></div>
    </Slider>
  );
};

使用Swiper.js

Swiper.js是一个现代化的触摸滑动库，支持React封装。通过Swiper组件可以实现高度自定义的卡片滑动效果。

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

const CardSwiper = () => {
  return (
    <Swiper
      spaceBetween={50}
      slidesPerView={3}
      onSlideChange={() => console.log('slide change')}
    >
      <SwiperSlide>Card 1</SwiperSlide>
      <SwiperSlide>Card 2</SwiperSlide>
      <SwiperSlide>Card 3</SwiperSlide>
    </Swiper>
  );
};

纯CSS和React状态管理

通过CSS的transform和transition属性结合React的useState钩子，可以手动实现卡片滑动效果。这种方法适合需要完全自定义的场景。

import React, { useState } from 'react';
import './CardSlider.css';

const CardSlider = () => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const cards = ['Card 1', 'Card 2', 'Card 3'];

  const nextCard = () => {
    setCurrentIndex((prevIndex) => (prevIndex + 1) % cards.length);
  };

  const prevCard = () => {
    setCurrentIndex((prevIndex) => (prevIndex - 1 + cards.length) % cards.length);
  };

  return (
    <div className="slider-container">
      <button onClick={prevCard}>Previous</button>
      <div className="slider">
        {cards.map((card, index) => (
          <div 
            key={index}
            className={`card ${index === currentIndex ? 'active' : ''}`}
          >
            {card}
          </div>
        ))}
      </div>
      <button onClick={nextCard}>Next</button>
    </div>
  );
};

对应的CSS文件示例：

.slider-container {
  display: flex;
  align-items: center;
}

.slider {
  display: flex;
  overflow: hidden;
  width: 300px;
}

.card {
  flex: 0 0 100%;
  transition: transform 0.5s ease;
}

.card.active {
  transform: translateX(0);
}

.card:not(.active) {
  transform: translateX(100%);
}

使用Framer Motion

Framer Motion是一个动画库，可以轻松实现复杂的卡片滑动动画效果。通过motion组件和AnimatePresence实现平滑过渡。

import React, { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';

const CardSlider = () => {
  const [[currentIndex, direction], setCurrentIndex] = useState([0, 0]);
  const cards = ['Card 1', 'Card 2', 'Card 3'];

  const paginate = (newDirection) => {
    setCurrentIndex([currentIndex + newDirection, newDirection]);
  };

  return (
    <div className="slider-container">
      <button onClick={() => paginate(-1)}>Previous</button>
      <AnimatePresence custom={direction}>
        <motion.div
          key={currentIndex}
          custom={direction}
          initial={{ opacity: 0, x: direction > 0 ? 200 : -200 }}
          animate={{ opacity: 1, x: 0 }}
          exit={{ opacity: 0, x: direction < 0 ? 200 : -200 }}
          transition={{ duration: 0.5 }}
        >
          {cards[currentIndex % cards.length]}
        </motion.div>
      </AnimatePresence>
      <button onClick={() => paginate(1)}>Next</button>
    </div>
  );
};