当前位置：首页 > VUE

vue过渡实现轮播

2026-01-19 06:20:54VUE

vue过渡实现轮播的方法

使用Vue的<transition>或<transition-group>组件结合CSS过渡或动画，可以轻松实现轮播效果。以下是两种常见的实现方式：

基础过渡轮播

通过v-if/v-show控制当前显示的轮播项，利用Vue的过渡效果实现平滑切换：

<template>
  <div class="carousel">
    <transition name="fade" mode="out-in">
      <div v-if="currentIndex === index" v-for="(item, index) in items" :key="item.id">
        <!-- 轮播内容 -->
        <img :src="item.image" />
      </div>
    </transition>
    <button @click="prev">上一张</button>
    <button @click="next">下一张</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      items: [
        { id: 1, image: 'image1.jpg' },
        { id: 2, image: 'image2.jpg' },
        { id: 3, image: 'image3.jpg' }
      ]
    }
  },
  methods: {
    next() {
      this.currentIndex = (this.currentIndex + 1) % this.items.length
    },
    prev() {
      this.currentIndex = (this.currentIndex - 1 + this.items.length) % this.items.length
    }
  }
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

使用transition-group实现滑动轮播

实现左右滑动的轮播效果：

<template>
  <div class="carousel-container">
    <transition-group name="slide" tag="div" class="carousel">
      <div v-for="(item, index) in items" 
           :key="item.id"
           v-show="currentIndex === index"
           class="slide-item">
        <img :src="item.image" />
      </div>
    </transition-group>
  </div>
</template>

<style>
.slide-enter-active, .slide-leave-active {
  transition: transform 0.5s;
}
.slide-enter {
  transform: translateX(100%);
}
.slide-leave-to {
  transform: translateX(-100%);
}
.carousel {
  position: relative;
  overflow: hidden;
  height: 300px;
}
.slide-item {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
</style>

自动轮播实现

添加定时器实现自动轮播：

export default {
  mounted() {
    this.startAutoPlay()
  },
  methods: {
    startAutoPlay() {
      this.timer = setInterval(() => {
        this.next()
      }, 3000)
    },
    stopAutoPlay() {
      clearInterval(this.timer)
    }
  },
  beforeDestroy() {
    this.stopAutoPlay()
  }
}

手势滑动支持

添加touch事件支持手势滑动：

<div class="carousel"
     @touchstart="handleTouchStart"
     @touchmove="handleTouchMove"
     @touchend="handleTouchEnd">
  <!-- 轮播内容 -->
</div>

<script>
export default {
  data() {
    return {
      touchStartX: 0
    }
  },
  methods: {
    handleTouchStart(e) {
      this.touchStartX = e.touches[0].clientX
    },
    handleTouchMove(e) {
      const touchX = e.touches[0].clientX
      const diff = this.touchStartX - touchX
      if (Math.abs(diff) > 50) {
        diff > 0 ? this.next() : this.prev()
      }
    }
  }
}
</script>