                        课程
                    
                        /前端开发
                        
                            /Vue.js
                        
                        /快速入门Web阅读器开发

完美解决，点击下一页上一页，进度条跟着变化的问题！

具体代码如下：

1.在Ebook.vue的data中定义progress=0

2.把Ebook.vue的progress传给子组件Menubar，名字叫做parentProgress（为了在子组件中不重名）

3.在Ebook.vue中在上一页和下一页方法中添加如下代码，主要是为了获取progress的数值

以上都是在Ebook.vue中的操作

--------------------------------------------

4.接着来到Menubar中通过props接收父组件传过来的值

5.data中的progress是在input type=range 进度条的绑定的value

6.最为关键的一步，通过watch监听父组件传过来的parentProgress的值是否变化，如果变化，则把变化的值赋值给进度条的progress，并且修改进度条的css样式。

watch采用的是深度方式deep：true

彭小呆

2018-11-02

源自：快速入门Web阅读器开发 3-12

关注问题我要回答

2538

操作

收起

8 回答

Sam 回答被采纳 +2 积分
2018-11-03

谢谢你继续扩展阅读器的功能

0 回复有任何疑惑可以回复我~

收起回答

四爷5
2020-06-23

章节跳转似乎并不能用这个方法解决。跳转之后

const currentLocation = this.rendition.currentLocation()

返回的还是跳转之前的location，有什么方法解决吗？

0 回复有任何疑惑可以回复我~

收起回答

慕村0585682
2019-09-20

按照1L同学 ‘微光世界’ 的思路，确实解决了报错的问题。

但是Bug本身并没有解决，即在locations对象未加载完毕时，点击前后翻页，进度条不更新。

解决这个Bug 我所想到的思路是：

在locations对象加载完毕的时候，去改变progress的值。这样当加载完成时，就能正常显示当前位置的进度条。

a.监听父组件传来的bookVailable值

bookVailable开始为false, 在加载完毕时变为true，此时会执行watch里的函数

b.调用父组件的函数

c.改变progress的值

这样progress改变，小球的位置就改变了，又因为监听了progress，所以样式也会动态改变。

此时，在locations对象未加载完毕时，点击翻页，进度条也能正常展示。Bug解决

1 回复有任何疑惑可以回复我~

收起回答

慕后端3187812
2019-04-10

因为locations还没有生成所以上下页无法点击，所以你还要写一个窗口来提示加载完成，或者在一开始的初始化时就直接加上

0 回复有任何疑惑可以回复我~

收起回答

慕神7088389
2019-03-07

v-else-if 改成v-show也可以

0 回复有任何疑惑可以回复我~

收起回答

superychen
2019-02-22

其余逻辑都差不多，通过监听Ebook中progress的变化来更新进度条的展示，在展示部分我这边进行了修改，

使用属性绑定(v-bind:style)+计算属性(computed)来更新progress的样式，这样不需要根据this.$refs.progress来获取progress，因为progress是在v-else-if代码块中，所以，如果用户没有打开过这个设置项，就不会渲染进来，会出现this.$refs中没有progress的情况，如下