现在市面上大多小说app的阅读页都能实现阅读翻页，让我们来看看这个效果用h5怎么实现
需求： 有一段长字符串 将其按照屏幕容纳字数进行分页，然后用tab页的形式呈现出来
首先初始化项目
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
计算基本需要的数据（一行多少字 一页多少行）
获取容器的宽度 由于我这里子元素都设置的100% 所以我只需要获取 最外层wrap的宽度
一行有多少字 = 容器宽度/字体大小 取小值 可获取一行最少有多少字
一页的行数 = 容器高度/行高
一页多少字 = 一行多少字*一页的行数
如果内容有分行我们用 p标签隔开 用swiper显示在页面上
直接贴代码 目前实现了字符串分页
还有不足的地方就是 如果内容有换行 这个换行不能正确显示
有待改进
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://3.swiper.com.cn/dist/css/swiper.min.css">
</head>
<style>
body,html{
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 20px;
color:#000;
margin: 0;
padding: 0;
}
#wrap{
height: 100%;
}
.swiper-container {
width: 100%;
height: 100%;
margin: 0px auto;
}
.swiper-slide {
background: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
}
.swiper-slide p{
text-indent: 2em;
margin-top: 1em;
margin-bottom: 1em;
line-height: 1.5em;
}
</style>
<body>
<div class="wrap" id="wrap">
<div class="swiper-container">
<div class="swiper-wrapper" id="pagewrap">
<div class="swiper-slide">Slide 10</div>
</div>
</div>
</div>
</body>
<script src="https://3.swiper.com.cn/dist/js/swiper.min.js"></script>
<script>
const readObj = {
title:"标题",
content:"PHP原始为Personal Home Page的缩写，已经正式更名为PHP: Hypertext Preprocessor。自20世纪90年代国内互联网\r\n开始发展到现在，互联网信息几乎覆盖了我们日常活动所有知识范畴，并逐渐成为我们生活、学习、工作中必不可少的一部分。据统计，从2003 年开始，我国的网页规模基本保持了翻番的增长速度，并且呈上升趋势。PHP 语言作为当今最热门的网站程序开发语言，它具有成本低、速度快、可移植性好、 内置丰富的函数库等优点，因此被越来越多的企业应用于网站开发中。但随着互联网的不断更新换代，PHP语言也出现了不少问题。根据动态网站要求，PHP语言作为一种语言程序，其专用性逐渐在应用过程中显现，其技术水平的优劣与否将直接影响网站的运行效率。其特点是具有公开的源代码， 在程序设计上与通用型语言，如C语言相似性较高，因此在操作过程中简单易懂，可操作性强。同时，PHP语言具有较高的数据传送处理水平和输出水平，可以广泛应用在Windows系统及各类Web服务器中。如果数据量较大，PHP语言还可以拓宽链接面，与各种数据库相连，缓解数据存储、检索及维护压力。随着技术的发展，PHP 语言搜索引擎还可以量体裁衣，实行个性化服务，如根据客户的喜好进行分类收集储存，极大提高了数据运行效率。对于非常小的项目，PHP是一个十分符合人意的编程语言。 但是对于较大的和更为复杂的项目，PHP 就显出它的薄弱了。所以，针对PHP暴露出的一系列缺点问题，我们应当不断地摸索之后，然后找到某些问题的解决方案。一个开源的语言十分流行是一件好事。希望所有的问题能有一天得到解决，然后我们就将拥有一个开源语言，它既开源，又好用。"
}
let wrapFontSize = 20 // 默认字体大小
let wrapLineHeight = 1.5*wrapFontSize //默认行高
let wrapWidth = wrap.offsetWidth // 容器宽度
let wrapHeight = wrap.offsetHeight // 容器高度
let lineFontNum = Math.floor(wrapWidth/wrapFontSize) // 行字数
let pageLineNum = Math.floor(wrapHeight/wrapLineHeight) //页行数
let pageFontNum = lineFontNum*pageLineNum
let pageNum = Math.ceil(readObj.content.length/pageFontNum) //总页数
console.log(readObj.content.length);
let pagehtml = '<div class="swiper-slide"><p>'
for(let i = 0;i<pageNum;i++){
let pagefont = readObj.content.substr(i*pageFontNum,pageFontNum)
console.log(pagefont)
pagehtml = pagehtml + pagefont+'</p></div>'
if (i != pageNum-1){
pagehtml = pagehtml+'<div class="swiper-slide"><p>'
}
}
pagewrap.innerHTML = pagehtml
var swiper = new Swiper('.swiper-container');
</script>
</html>