H5 小说阅读器-翻页篇

发表于 更新于 分类于

背景

参照客户端的众多小说阅读APP，实现类似的多种翻页效果。

数据源格式

某小说某章节内容

此处以服务端返回的HTML格式作为章节内容数据源，对其进行分页计算和渲染。

常规分页方式

全民小说怎么设置翻页全民小说设置翻页教程

  • 纵向上下滚动翻页
  • 横向仿真翻页

img

  • 横向覆盖

掌阅怎么设置翻页方式掌阅设置翻页方式方法

  • 横向平移

纵横小说怎么设置翻页模式纵横小说设置翻页模式教程

  • 淡入淡出 [横向]

    ……

分页算法实现

纵向分页

纵向分页场景下实现无太大难度

  1. v-html 或者 dom.innerHTML 直接展示章节内容。
  2. 监听纵向范围内上拉和下拉的事件，更新新的章节。

横向分页

横向分页场景下通常需要对文本内容计算出每一页的内容，实际开发过程中也应用到了CSS columns【多列】的方案。

  • 一次性需要将所有内容全部排列并渲染，内容过多时会影响页面性能；****

  • 分页不可人为控制，不方便扩展（在某一页后面增加广告页）；****

  • 翻页只能支持滑动效果，并不能支持“覆盖”、“仿真翻页”效果。**

从html => text

分页效果实现