当前位置：首页 > VUE

vue实现小说翻页效果

2026-01-21 13:07:16VUE

Vue实现小说翻页效果

基础翻页逻辑

通过v-model绑定当前页码，结合计算属性动态渲染章节内容。示例代码：

<template>
  <div class="reader-container">
    <div class="content">{{ currentContent }}</div>
    <button @click="prevPage">上一页</button>
    <button @click="nextPage">下一页</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      totalPages: 10,
      chapters: [
        { id: 1, text: '第一章内容...' },
        { id: 2, text: '第二章内容...' }
      ]
    }
  },
  computed: {
    currentContent() {
      return this.chapters[this.currentPage - 1]?.text || '无内容'
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) this.currentPage--
    },
    nextPage() {
      if (this.currentPage < this.totalPages) this.currentPage++
    }
  }
}
</script>

动画过渡效果

使用Vue的<transition>组件实现平滑翻页动画：

<transition name="page-flip" mode="out-in">
  <div :key="currentPage" class="page">
    {{ currentContent }}
  </div>
</transition>

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

触摸屏支持

添加触摸事件处理实现滑动翻页：

methods: {
  handleTouchStart(e) {
    this.touchStartX = e.touches[0].clientX
  },
  handleTouchEnd(e) {
    const deltaX = e.changedTouches[0].clientX - this.touchStartX
    if (deltaX > 50) this.prevPage()
    else if (deltaX < -50) this.nextPage()
  }
}

阅读进度持久化

使用localStorage保存阅读进度：

created() {
  const savedPage = localStorage.getItem('lastReadPage')
  if (savedPage) this.currentPage = parseInt(savedPage)
},
watch: {
  currentPage(newVal) {
    localStorage.setItem('lastReadPage', newVal)
  }
}

分页算法处理长文本

对于未分章的文本内容，可按字数自动分页：

splitTextToPages(text, wordsPerPage = 500) {
  const words = text.split(/\s+/)
  this.chapters = []
  for (let i = 0; i < words.length; i += wordsPerPage) {
    this.chapters.push({
      id: this.chapters.length + 1,
      text: words.slice(i, i + wordsPerPage).join(' ')
    })
  }
  this.totalPages = this.chapters.length
}

响应式布局

通过CSS媒体查询适配不同设备：

vue实现小说翻页效果

.reader-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

@media (max-width: 600px) {
  .reader-container {
    padding: 10px;
    font-size: 16px;
  }
}