android阅读器分页原理,用h5怎么实现阅读器分页效果

现在市面上大多小说app的阅读页都能实现阅读翻页，让我们来看看这个效果用h5怎么实现

需求：  有一段长字符串 将其按照屏幕容纳字数进行分页，然后用tab页的形式呈现出来

首先初始化项目

Document

计算基本需要的数据(一行多少字 一页多少行)

获取容器的宽度    由于我这里子元素都设置的100% 所以我只需要获取 最外层wrap的宽度

一行有多少字 = 容器宽度/字体大小 取小值 可获取一行最少有多少字

一页的行数 = 容器高度/行高

一页多少字 = 一行多少字*一页的行数

如果内容有分行我们用 p标签隔开 用swiper显示在页面上

直接贴代码 目前实现了字符串分页

还有不足的地方就是 如果内容有换行 这个换行不能正确显示

有待改进

Document

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;

}

Slide 10

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 = '

'

for(let i = 0;i

let pagefont = readObj.content.substr(i*pageFontNum,pageFontNum)

console.log(pagefont)

pagehtml = pagehtml + pagefont+'

'

if (i != pageNum-1){

pagehtml = pagehtml+'

'

}

}

pagewrap.innerHTML = pagehtml

var swiper = new Swiper('.swiper-container');

标签：分页,100%,h5,height,let,阅读器,PHP,swiper,语言

来源： https://www.cnblogs.com/likephp/p/14618410.html