当前位置：首页 > VUE

vue实现仿真翻页

2026-03-28 19:41:48VUE

Vue 实现仿真翻页效果

仿真翻页效果可以通过 CSS 动画和 Vue 的动态数据绑定实现。以下是实现方法：

HTML 结构

<template>
  <div class="page-container">
    <div class="page" :class="{ 'flipped': isFlipped }" @click="flipPage">
      <div class="front">
        {{ frontContent }}
      </div>
      <div class="back">
        {{ backContent }}
      </div>
    </div>
  </div>
</template>

CSS 样式

.page-container {
  perspective: 1000px;
  width: 300px;
  height: 400px;
  margin: 0 auto;
}

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

.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border: 1px solid #ccc;
  padding: 20px;
  box-sizing: border-box;
}

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

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

JavaScript 逻辑

<script>
export default {
  data() {
    return {
      isFlipped: false,
      frontContent: '这是页面正面内容',
      backContent: '这是页面背面内容'
    }
  },
  methods: {
    flipPage() {
      this.isFlipped = !this.isFlipped;
    }
  }
}
</script>

多页翻页效果扩展

对于多页翻页效果，可以创建一个页数组列：

HTML 结构

vue实现仿真翻页

<template>
  <div class="book">
    <div 
      v-for="(page, index) in pages" 
      :key="index" 
      class="page" 
      :class="{ 'flipped': page.flipped }"
      @click="flipPage(index)"
    >
      <div class="front">
        {{ page.front }}
      </div>
      <div class="back">
        {{ page.back }}
      </div>
    </div>
  </div>
</template>

JavaScript 逻辑

<script>
export default {
  data() {
    return {
      pages: [
        { front: '第1页正面', back: '第1页背面', flipped: false },
        { front: '第2页正面', back: '第2页背面', flipped: false },
        { front: '第3页正面', back: '第3页背面', flipped: false }
      ]
    }
  },
  methods: {
    flipPage(index) {
      this.pages[index].flipped = !this.pages[index].flipped;
    }
  }
}
</script>

添加翻页按钮控制

可以添加按钮来控制翻页而不是点击页面：

HTML 结构

vue实现仿真翻页

<template>
  <div>
    <button @click="prevPage">上一页</button>
    <button @click="nextPage">下一页</button>
    <div class="book">
      <!-- 页面结构同上 -->
    </div>
  </div>
</template>

JavaScript 逻辑

<script>
export default {
  data() {
    return {
      currentPage: 0,
      // pages数据同上
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 0) {
        this.currentPage--;
      }
    },
    nextPage() {
      if (this.currentPage < this.pages.length - 1) {
        this.currentPage++;
      }
    }
  }
}
</script>

高级翻页效果

要实现更逼真的翻页效果，可以使用第三方库如 turn.js 或手动实现更复杂的 CSS 3D 变换：

使用 turn.js

<template>
  <div id="flipbook">
    <div class="hard">封面</div>
    <div class="hard">第1页</div>
    <div class="hard">第2页</div>
    <div class="hard">封底</div>
  </div>
</template>

<script>
import 'turn.js'
export default {
  mounted() {
    $("#flipbook").turn({
      width: 800,
      height: 600,
      autoCenter: true
    });
  }
}
</script>

注意事项