当前位置：首页 > VUE

vue实现小说翻页效果

2026-02-22 04:31:40VUE

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>

平滑滚动动画

使用CSS过渡实现翻页动画效果：

.content {
  transition: transform 0.3s ease;
}
.slide-left {
  transform: translateX(-100%);
}
.slide-right {
  transform: translateX(100%);
}

配合Vue的过渡模式：

vue实现小说翻页效果

methods: {
  nextPage() {
    document.querySelector('.content').classList.add('slide-left')
    setTimeout(() => {
      this.currentPage++
      document.querySelector('.content').classList.remove('slide-left')
    }, 300)
  }
}

触摸屏支持

添加触摸事件处理实现手势翻页：

data() {
  return {
    touchStartX: 0
  }
},
methods: {
  handleTouchStart(e) {
    this.touchStartX = e.touches[0].clientX
  },
  handleTouchEnd(e) {
    const touchEndX = e.changedTouches[0].clientX
    const diffX = touchEndX - this.touchStartX

    if (diffX > 50) this.prevPage()
    else if (diffX < -50) this.nextPage()
  }
}

模板中绑定事件：

vue实现小说翻页效果

<div 
  @touchstart="handleTouchStart"
  @touchend="handleTouchEnd"
></div>

阅读进度持久化

使用localStorage保存阅读进度：

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

分页算法处理长文本

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

function paginateText(text, charsPerPage = 1500) {
  const pages = []
  for (let i = 0; i < text.length; i += charsPerPage) {
    pages.push(text.slice(i, i + charsPerPage))
  }
  return pages
}