当前位置：首页 > VUE

vue实现小说分页

2026-02-17 00:01:59VUE

vue实现小说分页的方法

数据分块处理

将小说文本按固定字符数或段落分割成数组，存储在Vue的data中。例如使用split()方法按段落分割：

data() {
  return {
    chapters: [], // 分章数据
    currentPage: 0,
    pageSize: 500 // 每页字符数
  }
}

计算属性实现分页

通过计算属性动态计算当前页内容：

computed: {
  paginatedText() {
    const start = this.currentPage * this.pageSize
    const end = start + this.pageSize
    return this.fullText.slice(start, end)
  }
}

翻页控制方法

添加翻页方法控制当前页码：

methods: {
  prevPage() {
    if (this.currentPage > 0) {
      this.currentPage--
    }
  },
  nextPage() {
    if ((this.currentPage + 1) * this.pageSize < this.fullText.length) {
      this.currentPage++
    }
  }
}

可视化分页器组件

创建分页器UI组件：

<div class="pagination">
  <button @click="prevPage" :disabled="currentPage === 0">上一页</button>
  <span>{{ currentPage + 1 }}/{{ totalPages }}</span>
  <button @click="nextPage" :disabled="isLastPage">下一页</button>
</div>

章节跳转功能

实现章节选择下拉菜单：

<select v-model="currentChapter" @change="changeChapter">
  <option v-for="(chapter, index) in chapters" :value="index">
    {{ chapter.title }}
  </option>
</select>

阅读进度保存

使用localStorage保存阅读进度：

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

响应式布局优化

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

vue实现小说分页

.reader-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}
@media (max-width: 600px) {
  .reader-container {
    padding: 10px;
  }
}