在点击上一章和下一章节的时候, 滚动条在走,但是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或是码云这些代码托管平台,把地址发我一下,我在本地帮你测试定位一下问题。
012021-06-08
相似问题