在点击上一章和下一章节的时候, 滚动条在走,但是updated的函数没有触发

来源:5-5 阅读进度功能实现(保存阅读进度功能)

丛从绿草

2021-06-08

在点击上一章和下一章节的时候, 滚动条在走,但是updated的函数没有触发

  methods: {
    onProgressChange (progress) {
      this.setProgress(progress).then(() => {
        this.displayProgress()
        this.updateProgressBg()
      })
    },
    onProgressInput (progress) {
      this.setProgress(progress).then(() => {
        this.displayProgress()
        this.updateProgressBg()
      })
    },
    displayProgress () {
      const cfi = this.currentBook.locations.cfiFromPercentage(this.progress / 100)
      this.display(cfi)
    },
    prevSection () {
      if (this.section > 0 && this.bookAvailable) {
        this.setSection(this.section - 1).then(() => {
          this.displaySection()
        })
      }
    },
    nextSection () {
      if (this.section < this.currentBook.spine.length - 1 && this.bookAvailable) {
        this.setSection(this.section + 1).then(() => {
          this.displaySection()
        })
      }
    },
    displaySection () {
      const sectionInfo = this.currentBook.section(this.section)
      if (sectionInfo && sectionInfo.href) {
        this.display(sectionInfo.href)
      }
    },
    // 更新进度条
    updateProgressBg () {
      this.$refs.refProgress.style.backgroundSize = `${this.progress}% 100%`
    }
  },
  // 这里点击进度条菜单没有触发滚动条更新,我这里用了父子传参来触发这个滚动条更新,
  props: {
    currentIndex: Number
  },
  watch: {
    currentIndex (newval, oldval) {
      if (newval === 2) this.updateProgressBg()
    }
  },
  updated () {
    this.updateProgressBg()
  }
// 刷新当前进度条位置
refreshLocation () {
  // 获取电子书当前定位
  const currentLocation = this.currentBook.rendition.currentLocation()
  if (!currentLocation.start) return
  const startCfi = currentLocation.start.cfi
  const progress = this.currentBook.locations.percentageFromCfi(currentLocation.start.cfi)
  this.setProgress(Math.floor(progress * 100))
  if (currentLocation.start) {
    this.setSection(currentLocation.start.index)
  }
  saveLocation(this.fileName, startCfi)
},
display (target, cb) {
  if (target) {
    this.currentBook.rendition.display(target).then(() => {
      this.refreshLocation()
      if (cb) cb()
    })
  } else {
    this.currentBook.rendition.display().then(() => {
      this.refreshLocation()
      if (cb) cb()
    })
  }
}

然而这里点击上一章和点击下一张的时候,这个this.updateProgressBg() 依然没有触发, 实在是不明白,这个updated函数在这里的意义。其实按道理说,应该会触发这个updated函数的啊,

写回答

1回答

扬_灵

2021-06-08

同学你好,可以把项目代码上传到GitHub或是码云这些代码托管平台,把地址发我一下,我在本地帮你测试定位一下问题。

0
1
丛从绿草
https://gitee.com/WJN06/bazai_ebook.git, 老师这是我的码云地址,一个是进场动画有问题,还有一个就是这个updated不起作用。其他的暂时还没有 。我的代码是截止到5-10的。
2021-06-08
共1条回复

Vue 实战商业级读书Web APP完整项目

Vue全家桶+最新前端技术+前后端分离架构,完整项目流程

1610 学习 · 1951 问题

查看课程