使用Vue实现图片翻页

实现思路

利用Vue的响应式数据和过渡动画系统，结合CSS的transform属性实现图片翻页效果。核心是通过控制图片的旋转角度和层级关系，模拟真实翻页的视觉体验。

基础HTML结构

<template>
  <div class="flip-container">
    <div 
      class="flip-page" 
      :class="{ 'flipping': isFlipping }"
      @click="flipPage"
    >
      <div class="front">
        <img :src="currentImage" alt="Front Image">
      </div>
      <div class="back">
        <img :src="nextImage" alt="Back Image">
      </div>
    </div>
  </div>
</template>

Vue组件脚本

<script>
export default {
  data() {
    return {
      images: [
        'image1.jpg',
        'image2.jpg',
        'image3.jpg'
      ],
      currentIndex: 0,
      isFlipping: false
    }
  },
  computed: {
    currentImage() {
      return this.images[this.currentIndex]
    },
    nextImage() {
      return this.images[(this.currentIndex + 1) % this.images.length]
    }
  },
  methods: {
    flipPage() {
      if (this.isFlipping) return

      this.isFlipping = true
      setTimeout(() => {
        this.currentIndex = (this.currentIndex + 1) % this.images.length
        this.isFlipping = false
      }, 1000)
    }
  }
}
</script>

CSS样式设计

<style scoped>
.flip-container {
  perspective: 1000px;
  width: 300px;
  height: 200px;
}

.flip-page {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.flip-page.flipping {
  transform: rotateY(180deg);
}

.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.back {
  transform: rotateY(180deg);
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

高级优化方案

添加阴影效果增强立体感

.flip-page::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.2);
  transform: rotateY(90deg);
  z-index: 10;
  transition: all 1s;
}

.flip-page.flipping::before {
  background: rgba(0,0,0,0);
}

自动翻页功能

在组件中添加自动翻页逻辑

mounted() {
  this.autoFlip = setInterval(() => {
    this.flipPage()
  }, 3000)
},
beforeDestroy() {
  clearInterval(this.autoFlip)
}

触摸设备支持

添加触摸事件处理

<div 
  class="flip-page"
  @touchstart="handleTouchStart"
  @touchend="handleTouchEnd"
>

methods: {
  handleTouchStart(e) {
    this.touchStartX = e.touches[0].clientX
  },
  handleTouchEnd(e) {
    const deltaX = e.changedTouches[0].clientX - this.touchStartX
    if (Math.abs(deltaX) > 50) {
      this.flipPage()
    }
  }
}