保存了进度但是百分比不能更新的问题

来源：5-5 阅读进度功能实现（保存阅读进度功能）

慕莱坞9699021

2019-10-14

你好，我想问一下保存了进度但是百分比不能更新的问题。
代码如下，在mounted的时候调用initPage方法

initPage () {
      this.book.ready.then(() => {
        return this.book.locations.generate(750 * (window.innerWidth) / 375) * (getFontSize(this.setFileName) / 16)
      }).then((res) => {
        this.setBookAvailable(true)
        this.refreshLocation()
      })
    },

refreshLocation的代码如下

refreshLocation () {
      const currentLocation = this.currentBook.rendition.currentLocation()
      const startCfi = currentLocation.start.cfi
      const progress = this.currentBook.locations.percentageFromCfi(startCfi)
      this.setProgress(Math.floor(progress * 100))
      setLocation(this.fileName, startCfi)
    },

报错如下
Uncaught (in promise) TypeError: Cannot read property ‘currentLocation’ of undefined

之前回答的是加一个非空判断即可，但是报错的地方是在获取的时候，也就是调用this.currentBook.rendition.currentLocation()的时候报错，就算是加了非空判断也是会报错的，而且无法获取到电子书的当前页.
epubjs的版本一开始为"epubjs": “^0.3.85”,然后降到0.3.71，也还是一样报错。
请问应该如何解决呢？

写回答

2回答

Sam

2019-10-19

已采纳

你好，你的代码调试过了，问题已经解决啦，解决方法如下：

下面是你的源码：

this.book.ready.then(() => {
  return this.book.locations.generate(750 * (window.innerWidth) / 375) * (getFontSize(this.setFileName) / 16)
}).then((res) => {
  this.setBookAvailable(true)
  this.refreshLocation()
})

问题出在下面这句：

this.book.locations.generate(750 * (window.innerWidth) / 375) * (getFontSize(this.setFileName) / 16)

首先是，算法的括号位置写错了，正确写法如下：

750 * (window.innerWidth / 375)

其次是，变量名写错了，正确写法如下：

(getFontSize(this.fileName) / 16)

最后提供正确代码，可以直接拷贝，亲测可用：

initPage () {
  this.book.ready.then(() => {
    return this.book.locations.generate(750 * (window.innerWidth / 375) * (getFontSize(this.fileName) / 16))
  }).then((res) => {
    this.setBookAvailable(true)
    this.refreshLocation()
  })
},

慕莱坞9699021

非常感谢！

2019-10-21

共1条回复