vue实现轮播动画

使用 Vue 实现轮播动画

基础轮播实现（基于 v-show 和定时器）

通过 v-show 控制当前显示项，结合 setInterval 实现自动轮播。核心逻辑如下：

<template>
  <div class="carousel">
    <div v-for="(item, index) in items" :key="index" v-show="currentIndex === index">
      {{ item.content }}
    </div>
    <button @click="prev">Prev</button>
    <button @click="next">Next</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { content: 'Slide 1' },
        { content: 'Slide 2' },
        { content: 'Slide 3' }
      ],
      currentIndex: 0,
      timer: null
    }
  },
  mounted() {
    this.startAutoPlay()
  },
  methods: {
    startAutoPlay() {
      this.timer = setInterval(() => {
        this.next()
      }, 3000)
    },
    next() {
      this.currentIndex = (this.currentIndex + 1) % this.items.length
    },
    prev() {
      this.currentIndex = (this.currentIndex - 1 + this.items.length) % this.items.length
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  }
}
</script>

添加 CSS 过渡动画

通过 Vue 的 <transition> 组件和 CSS 实现平滑过渡效果：

<template>
  <div class="carousel-container">
    <transition name="slide" mode="out-in">
      <div :key="currentIndex" class="slide">
        {{ items[currentIndex].content }}
      </div>
    </transition>
  </div>
</template>

<style>
.slide-enter-active, .slide-leave-active {
  transition: all 0.5s ease;
}
.slide-enter {
  transform: translateX(100%);
}
.slide-leave-to {
  transform: translateX(-100%);
}
</style>

使用第三方库（Swiper.js）

对于更复杂的轮播需求，可以集成 Swiper.js：

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(item, index) in items" :key="index">
        {{ item.content }}
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>

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

export default {
  data() {
    return {
      items: [...],
      mySwiper: null
    }
  },
  mounted() {
    this.mySwiper = new Swiper('.swiper-container', {
      loop: true,
      autoplay: {
        delay: 3000,
      },
      pagination: {
        el: '.swiper-pagination',
      }
    })
  }
}
</script>

响应式轮播实现

结合 window.resize 事件和计算属性实现响应式：

export default {
  computed: {
    slidesToShow() {
      return window.innerWidth < 768 ? 1 : 3
    }
  },
  methods: {
    updateSlides() {
      if (this.mySwiper) {
        this.mySwiper.params.slidesPerView = this.slidesToShow
        this.mySwiper.update()
      }
    }
  },
  mounted() {
    window.addEventListener('resize', this.updateSlides)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.updateSlides)
  }
}

手势支持（移动端）

添加 touch 事件处理实现手势滑动：

methods: {
  handleTouchStart(e) {
    this.startX = e.touches[0].clientX
  },
  handleTouchEnd(e) {
    const endX = e.changedTouches[0].clientX
    if (this.startX - endX > 50) {
      this.next()
    } else if (endX - this.startX > 50) {
      this.prev()
    }
  }
}

模板中需要添加相应事件监听：

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