当前位置：首页 > VUE

vue实现按卡片轮播

2026-03-06 16:13:37VUE

Vue实现卡片轮播的几种方法

使用Swiper.js实现卡片轮播

安装Swiper依赖：

npm install swiper

在Vue组件中使用：

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(card, index) in cards" :key="index">
        <!-- 卡片内容 -->
        <div class="card">
          <h3>{{ card.title }}</h3>
          <p>{{ card.content }}</p>
        </div>
      </div>
    </div>
    <!-- 分页器 -->
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.css'

export default {
  data() {
    return {
      cards: [
        { title: '卡片1', content: '内容1' },
        { title: '卡片2', content: '内容2' },
        { title: '卡片3', content: '内容3' }
      ]
    }
  },
  mounted() {
    new Swiper('.swiper-container', {
      slidesPerView: 3,
      spaceBetween: 30,
      pagination: {
        el: '.swiper-pagination',
        clickable: true
      }
    })
  }
}
</script>

<style>
.swiper-container {
  width: 100%;
  height: 300px;
}
.card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
</style>

使用纯CSS实现简单轮播

<template>
  <div class="carousel">
    <div class="carousel-container" :style="{ transform: `translateX(${offset}px)` }">
      <div class="card" v-for="(card, index) in cards" :key="index">
        <h3>{{ card.title }}</h3>
        <p>{{ card.content }}</p>
      </div>
    </div>
    <button @click="prev">上一张</button>
    <button @click="next">下一张</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cards: [
        { title: '卡片1', content: '内容1' },
        { title: '卡片2', content: '内容2' },
        { title: '卡片3', content: '内容3' }
      ],
      currentIndex: 0,
      cardWidth: 300
    }
  },
  computed: {
    offset() {
      return -this.currentIndex * this.cardWidth
    }
  },
  methods: {
    prev() {
      this.currentIndex = Math.max(0, this.currentIndex - 1)
    },
    next() {
      this.currentIndex = Math.min(this.cards.length - 1, this.currentIndex + 1)
    }
  }
}
</script>

<style>
.carousel {
  width: 300px;
  overflow: hidden;
  position: relative;
}
.carousel-container {
  display: flex;
  transition: transform 0.5s ease;
}
.card {
  flex: 0 0 300px;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-right: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
</style>

使用Vue专用轮播组件

安装vue-awesome-swiper：

npm install vue-awesome-swiper swiper

使用示例：

<template>
  <swiper :options="swiperOption">
    <swiper-slide v-for="(card, index) in cards" :key="index">
      <div class="card">
        <h3>{{ card.title }}</h3>
        <p>{{ card.content }}</p>
      </div>
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      cards: [
        { title: '卡片1', content: '内容1' },
        { title: '卡片2', content: '内容2' },
        { title: '卡片3', content: '内容3' }
      ],
      swiperOption: {
        slidesPerView: 3,
        spaceBetween: 30,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      }
    }
  }
}
</script>

使用Vant UI的轮播组件

安装Vant：

npm install vant

使用示例：

vue实现按卡片轮播

<template>
  <van-swipe :loop="false" :width="300">
    <van-swipe-item v-for="(card, index) in cards" :key="index">
      <div class="card">
        <h3>{{ card.title }}</h3>
        <p>{{ card.content }}</p>
      </div>
    </van-swipe-item>
  </van-swipe>
</template>

<script>
import { Swipe, SwipeItem } from 'vant'

export default {
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem
  },
  data() {
    return {
      cards: [
        { title: '卡片1', content: '内容1' },
        { title: '卡片2', content: '内容2' },
        { title: '卡片3', content: '内容3' }
      ]
    }
  }
}
</script>