VyingGao
2018-09-01 15:04
当点击视图左右区域触发翻页时,如何使得进度条发生相应变化?
现在无论字号、主题还是进度,能设置但是不清楚怎么访问当前值?求老师指教。
可以参考官方提供的例子:
// Wait for book to be rendered to get current page displayed.then(function(){ // Get the current CFI var currentLocation = rendition.currentLocation(); // Get the Percentage (or location) from that CFI var currentPage = book.locations.percentageFromCfi(currentLocation.start.cfi); slider.value = currentPage; currentPage.value = currentPage; });
你好,这个问题需要使用Locations对象的locationFromCfi()来实现
locationFromCfi(cfi) : number
传入cfi即定位数据后获取对应的百分比,然后将百分比传入进度条控件即可
onLocationChange() {let curLocation = this.rendition.currentLocation()this.curPercentage = (Math.floor(this.locations.percentageFromCfi(curLocation.start.cfi) * 10000) / 100).toFixed(1) * 1// console.log(this.curPercentage)}
翻页事件中触发此事件,传一个curPercentage参数给menuBar,watch curPercentage变化时调用menuBar中的方法:
onCurPercentageChange() {this.progress = this.curPercentagethis.$refs.progress.style.backgroundSize = `${this.progress}% 100%`}
参考一下。
快速入门Web阅读器开发
26396 学习 · 214 问题
相似问题
回答 1
回答 1