当前位置：首页 > VUE

vue实现页面翻动

2026-02-19 08:36:37VUE

Vue 实现页面翻动效果

使用 CSS Transitions 和 Vue 数据绑定

通过 Vue 的数据绑定和 CSS 过渡效果，可以实现平滑的页面翻动动画。定义一个变量来控制当前页面的状态，结合 CSS 的 transform 属性实现翻动效果。

<template>
  <div class="flip-container">
    <div class="flip-page" :class="{ 'flipped': isFlipped }">
      <div class="front">Front Content</div>
      <div class="back">Back Content</div>
    </div>
    <button @click="isFlipped = !isFlipped">Flip Page</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isFlipped: false
    };
  }
};
</script>

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

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

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

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

.front {
  background-color: #f0f0f0;
}

.back {
  background-color: #e0e0e0;
  transform: rotateY(180deg);
}
</style>

使用第三方库（如 vue-flip-page）

对于更复杂的翻页效果，可以使用第三方库如 vue-flip-page。安装后直接调用组件即可实现翻页效果。

npm install vue-flip-page

<template>
  <flip-page>
    <div slot="front">Front Content</div>
    <div slot="back">Back Content</div>
  </flip-page>
</template>

<script>
import FlipPage from 'vue-flip-page';

export default {
  components: {
    FlipPage
  }
};
</script>

结合手势库实现触摸翻页

如果需要支持触摸滑动翻页，可以结合 hammer.js 或 vue-touch 库实现手势控制。

npm install hammerjs vue-touch

<template>
  <div class="flip-container" v-touch:swipe.left="flipPage">
    <div class="flip-page" :class="{ 'flipped': isFlipped }">
      <div class="front">Front Content</div>
      <div class="back">Back Content</div>
    </div>
  </div>
</template>

<script>
import VueTouch from 'vue-touch';
import Hammer from 'hammerjs';

export default {
  directives: {
    Touch: VueTouch({ Hammer })
  },
  data() {
    return {
      isFlipped: false
    };
  },
  methods: {
    flipPage() {
      this.isFlipped = !this.isFlipped;
    }
  }
};
</script>

动态内容翻页

如果需要动态加载翻页内容，可以通过 Vue 的 v-for 和动态组件实现。

<template>
  <div class="flip-container">
    <div class="flip-page" :class="{ 'flipped': currentPage === index }" v-for="(page, index) in pages" :key="index">
      <div class="front">{{ page.front }}</div>
      <div class="back">{{ page.back }}</div>
    </div>
    <button @click="nextPage">Next Page</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 0,
      pages: [
        { front: 'Page 1 Front', back: 'Page 1 Back' },
        { front: 'Page 2 Front', back: 'Page 2 Back' }
      ]
    };
  },
  methods: {
    nextPage() {
      this.currentPage = (this.currentPage + 1) % this.pages.length;
    }
  }
};
</script>