1. 写在前面

最近在尝试做一个小说阅读器的Web App，对于阅读器来说最重要的肯定就是读书的界面了。在这个页面中，需要将大段的文字进行分页并让文字正好填满屏幕。一开始我把问题想得较为简单，但在实现过程中遇到了一些困难。

2. 一开始的思路

接口返回的数据即为小说某一章的全部文本。在我一开始的想法中，可以在收到返回数据后，将文本全部放入一个容器中，通过容器的高度除以屏幕可视区域的高度计算出需要拆分的页数。接着渲染相应个数的容器并且通过overflow: hidden和设置scrollTop的值显示每页内容。然而在实现过程中发现了这个方案存在的一个巨大问题：文字有可能被上下分成两半。

3. 文本分割

首先在页面创建一个和展示区域大小一致的容器。通过fontSize和lineHeight可以大致估算出每页最多容纳的文字数量，将文本按最大文字数量截取并放入容器中，如果容器高度超出则减少一行文字；如果容器高度小于等于展示区域高度，则逐字增加，直到正好填满该容器。

const getPages = (text) => {const { clientWidth, clientHeight } = document.body // 获取页面宽高const fontPerLineNum = Math.floor(clientWidth / fontSize) // 每行字数const colPerPageNum = Math.floor(clientHeight / lineHeight) // 每页行数let fontPerPageNum =  fontPerLineNum * colPerPageNum // 每页最大字数// 获取测试容器const test = document.getElementById('page-test')let startIndex = 0 // text下标开始位置let textArray = [] // 分页结果数组while (startIndex < text.length) {let splitNum = fontPerPageNum // 首先使用最大字数测试test.innerText = text.substr(startIndex, splitNum)while (test.scrollHeight > clientHeight) {splitNum -= fontPerLineNum // 如果高度超过，则每次减少一行字数的量test.innerText = text.substr(startIndex, splitNum)}while (test.scrollHeight <= clientHeight && startIndex + splitNum - 1 < text.length) {splitNum += 1 // 高度<=页面高度，则每次增加1字符直到正好填满test.innerText = text.substr(startIndex, splitNum)}textArray.push(text.substr(startIndex, splitNum - 1))startIndex += splitNum - 1}setPages(textArray)
}

4. CSS columns 属性

columns 属性是 column-width 与 column-count 的简写属性。

columns: column-width column-count;
// column-width: 列的宽度
// column-count: 列数

因此可以使用如下方法实现阅读器的分页：

.chapter-wrapper {padding: 0 16px;height: calc(100vh - 60px);overflow: hidden;.chapter-contents {white-space: pre-line; // \r\n换行width: 100%;height: 100%;columns: calc(100vw - 32px) 1;column-gap: 16px;}
}

columns: calc(100vw - 32px) 1;代表每一列的宽度即为页面宽度减去两侧列之间的缝隙间隔宽度（即column-gap: 16px;）。

通过宽度计算可以得出分页页数，接着再通过translateX实现翻页功能即可。

const contentWidth = contentRef.current.scrollWidth
const { clientWidth } = document.body
const pages = Math.ceil(contentWidth / clientWidth) // 页数

[1] javascript小说阅读器分页算法的实现

[2] 前端实现一个小说分页的功能

小说阅读器中分页的实现[js]相关推荐

电脑上最好的3个小说阅读器
epub.txt等使用广泛的小说电子书格式,想必平时大家通常会遇到自己使用的小说阅读器不能在Windows系统上兼容的问题,因为工作的原因,小编接触到很多不同的阅读器,今天小编将为大家推荐Window ...
Windows电脑上最好的3个小说阅读器
epub.txt是两种使用广泛的小说电子书格式,想必平时大家通常会遇到自己使用的小说阅读器不能在Windows系统上兼容的问题,因为工作的原因,小编接触到很多不同的阅读器,今天小编将为大家推荐Wind ...
【java文本处理】实现一个简单的小说文本阅读器（分页、翻页、页码跳转）
一.目的读出文本(.txt)内容显示至dos命令窗: 按规定行数将文本进行分页: 在dos下实现文本翻页.页码跳转等功能,形成简单小说阅读器. 二.主要方法 1. RandomAccessFile类 ...
小说阅读器开发（二）文本的排版与分页
一个最简单的小说阅读器,也离不开文本的显示.起初,我以为这是件十分容易完成的事,慢慢的,我才意识到其中的复杂性.很多时候,对于文本的显示,一个文本框便能解决.但是,兼顾着排版与分页等复杂的功能,常用的 ...
小说阅读器开发笔记（二）文本的排版与分页
一个最简单的小说阅读器,也离不开文本的显示.起初,我以为这是件十分容易完成的事,慢慢的,我才意识到其中的复杂性.很多时候,对于文本的显示,一个文本框便能解决.但是,兼顾着排版与分页等复杂的功能,常 ...
❤️一文掌握HTML+CSS+JS开发小说阅读器❤️
上周<让CSS3中Transform属性带你一文实现炫酷的转盘抽奖效果>博文中说到这周出一篇介绍小说阅读器开发的博文,可能是离职不上班的原因,在家变得也懒散了一些,本来是打算上周三时候动手 ...
java实现小说阅读器（功能：查看全文、统计总行数/总页码数、查找指定行、指定页码、实现翻页）
1.任务要求: 在DOS窗口下,实现查看全文.统计总行数/总页码数.查找指定行.指定页码.翻页 2.阅读器实现方式输入1(查看全文.统计总行数/总页码数.) 输入2(读取指定行,查找其上下行) 输入 ...
小说阅读器未能连接服务器怎么办,vue移动端小说阅读器vue全家桶项目，已部署到服务器可访问预览...
暑假实习了几个月辞职后,闲着无聊自己开发的一个vue小说阅读器链接预览地址,里面的小说接口调用的是追书神器,然后我把里面的vip和收费章节做了处理加了个换源功能,里面需要收费或者vip的小说都可以免 ...
使用vue全家桶搭建的vue小说阅读器，已部署到服务器可预览
暑假实习了几个月辞职后,闲着无聊自己开发的一个vue小说阅读器链接请使用浏览器打开此链接 http://39.96.55.152(由于域名需要备案用的是ip地址),里面的小说接口调用的是追书神器, ...

小说阅读器中分页的实现[js]

文章目录

1. 写在前面

2. 一开始的思路

3. 文本分割

4. CSS columns 属性

小说阅读器中分页的实现[js]相关推荐

最新文章

热门文章