当前位置：首页 > VUE

vue实现小说分页

2026-03-28 22:56:23VUE

Vue 实现小说分页功能

核心思路

通过计算文本总长度和每页字符数动态分割文本，结合 Vue 的响应式特性实现分页切换功能。

数据结构准备

data() {
  return {
    fullText: '',       // 完整小说文本
    pageSize: 500,      // 每页字符数
    currentPage: 1,     // 当前页码
    totalPages: 1,      // 总页数
    pages: []           // 分页后的数组
  }
}

文本分页方法

methods: {
  splitTextToPages() {
    this.pages = [];
    for (let i = 0; i < this.fullText.length; i += this.pageSize) {
      this.pages.push(this.fullText.slice(i, i + this.pageSize));
    }
    this.totalPages = this.pages.length;
  }
}

生命周期调用

mounted() {
  // 假设通过接口获取小说内容
  fetchNovelContent().then(text => {
    this.fullText = text;
    this.splitTextToPages();
  });
}

模板渲染部分

<template>
  <div class="reader-container">
    <div class="page-content">
      {{ pages[currentPage - 1] }}
    </div>

    <div class="page-controls">
      <button 
        @click="currentPage--" 
        :disabled="currentPage <= 1">
        上一页
      </button>

      <span>{{ currentPage }} / {{ totalPages }}</span>

      <button 
        @click="currentPage++" 
        :disabled="currentPage >= totalPages">
        下一页
      </button>
    </div>
  </div>
</template>

样式优化建议

.reader-container {
  max-width: 800px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.6;
}

.page-content {
  min-height: 60vh;
  padding: 20px;
  background: #f8f5ee;
  border-radius: 4px;
}

.page-controls {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  gap: 20px;
}

高级功能扩展

记住阅读进度：

watch: {
currentPage(newVal) {
 localStorage.setItem('lastReadPage', newVal);
}
}

调整字体大小：
```
data() {
return {
 fontSize: 16
}
}
```

<div class="font-controls">
  <button @click="fontSize--">A-</button>
  <button @click="fontSize++">A+</button>
</div>

<div class="page-content" :style="{ fontSize: fontSize + 'px' }">
  {{ pages[currentPage - 1] }}
</div>

夜间模式切换：
```
data() {
return {
 darkMode: false
}
}
```

.night-mode {
  background-color: #222;
  color: #ddd;
}

<div class="reader-container" :class="{ 'night-mode': darkMode }">
  <button @click="darkMode = !darkMode">
    {{ darkMode ? '日间模式' : '夜间模式' }}
  </button>
</div>