三、阅读器开发--3.阅读进度开发

1、阅读进度功能实现（进度面板+分页逻辑）

这个进度条我们之前做过，现在我们先把之前的布局样式先集成过来

然后我们把onProgressChange、onProgressInput方法定义好，把bookAvailable、progress放到vuex中，这样基本的集成就做好了

然后到EbookMenu中引入这个组件，才能使这个进度条设置栏显示出来，引入后面板即可正常展示出来了。这个:value绑定的progress就是你进度条定的最大100最小0中你拖到50那progress就是50

接下来我们完善进度条布局，现在我们加上左右两个箭头和上面的文字等，最终如下

我们看进度条input里面:disabled="!bookAvailable"，bookAvailable在vuex中默认状态是false，那么我们的进度条就会处于disabled状态即不可用的状态。所以我们需要添加解析location即获取定位解析定位这样的操作，然后把bookAvailable置为true。

下面我们回到EbookReader中来进行电子书的分页，分页后就可以设置bookAvailable为true，这样我们的进度条就可以使用了。我们到initEpub中增加分页的算法，

最终如下，我们当前这本书就分出了517页，然后每一页都会有一个epubcfi，epubcfi是epub标准中的一个核心标准，用来做电子书的定位，它可以定位到我们电子书中任何一个位置

分页完毕后我们就可以设置bookAvailable为true了，这个setBookAvailable就会把我们vuex中的bookAvailable置为true了，这时我们的进度条就可以接收的到变化了即此时进度条可以拖动了

接下来我们实现进度条拖动过程、拖动松手时这些

进度条拖动松手：松手后把获取progress从而去修改vuex中的progress并且去展示当前进度所在页面

如下，当前进度的cfi是这样子的

获取到cfi后，就可以直接通过book对象的rendition对象去渲染cfi即可渲染出当前页面，此时我们拖动进度条当前页面电子书内容发生变化，进度条下面的百分比也发生变化

我们当前是拖动松手即停止后下面的百分比才变化，我希望它拖动的时候就跟着发生变化，即做进度条拖动时的函数，如下即可实现

如果我们希望拖动的时候内容也同时跟着发生变化，如下把修改后的progress通过.then接下然后去获取cfi渲染即可

我们发现在有个问题就是拖动进度条后左侧进度条颜色没有加深表示已经读过，所以这里增加一个方法updateProgressBg，然后把之前样式中的background和background-size删掉，因为在主题样式文件中对progress的背景颜色进行了设置，所以这里就不生效了，需要通过js来控制即可

接下来我们实现上一章下一章的点击功能

我们在vuex中定义了一个变量叫section默认为0，它用来指定当前章节的位置，0表示第一章节，1表示第二章节这样子，然后我们来搞一下上一章的左箭头。通过book对象的section(a)可以获取第a章节的信息

我们把默认的section从0改为3先测试一下 ，然后点击左箭头发现获取到了2即上一章的内容，如下我们可以获取到上一章的href即路径，那我们就可以通过传入href给display方法来渲染上一章内容

上一章功能实现了，下一章也是一样的，只不过判断条件有一些区别

最终可以整合成这样子

发现点击左右箭头章节跳转的同时，下面的进度百分比没有跟着变化，所以接下来解决这个问题

打印出来，如图可以看到currentLocation会给出一个start和end，就是本页开始时的定位和本页结束时的定位，会给到定位符cfi，同时里面还可以看到它有当前页准确的页数，如下当前章节index:1,location是根据我们的分页此时这个位于第一页，那个percentage就是进度百分比

有了这些我们就可以去获取progress，然后点击下一章，下面的进度百分比也会跟着变化了

然后我们来实现百分比前面有当前章节的名称，接下来我们就来实现获取当前章节的名称

如下通过一个计算属性，先获取当前章节的信息，然后通过navigation目录对象去获取如下的label即目录名称

所以返回这个label即可

如下当目录太长布局就会出现问题

所以我们可以把目录限制为一行显示，如下@include center;上面引入flex布局，

以上功能都实现后，下一个我们实现保存阅读进度功能

比如我们进度条拖动后，刷新页面，我们希望我们仍然回到这个位置，还有一个就是我们翻页后刷新也能回到原先的位置，然后通过左右箭头章节切换的时候也能进行保存

如下，我们到localstorage.js中定义缓存阅读进度到本地缓存中以及读取缓存中当前阅读进度的方法，然后导入到进度条设置栏中

然后应该是在渲染后刷新的时候去保存当前进度到本地缓存中，刷新很多组件用所以抽到mixin中

改变进度条后刷新，可如下可以看到本地缓存中保存了location的值

我们是在刷新的时候保存的记录，此时我们还只是在渲染某章节内容的时候才去调用的刷新，如下时候也应该去调用刷新，

然后EbookReader中初始化的时候也应该去刷新保存位置到本地存储中，所以多个组件用，我们就把这个刷新的refreshLocation方法放到mixin中，这样各组件都可以用到这个refreshLocation

然后

即可实现点击左右箭头还是移动进度条都可以保存当前位置到本地存储中，并且点击箭头后或移动进度条后刷新还是能保存刷新前的页面，因为刷新前都保存当前位置到本地存储中了嘛，而刷新时就读取的本地存储的值进行渲染的嘛

接下来我们实现进度条上面的阅读时间功能

阅读时间是在载入阅读器后就开始进行统计的，所以需要回到阅读器载入页面即views下的ebook下的index.vue中，阅读时间是指花在这本电子书上的阅读时间

首先到localStorage.js中定义存储阅读时间和获取阅读时间的方法

然后在index.vue中

然后到进度条设置组件中，