当触发翻页时，如何使得进度条发生相应变化？

源自：3-11 阅读进度功能实现

当触发翻页时，如何使得进度条发生相应变化？

当点击视图左右区域触发翻页时，如何使得进度条发生相应变化？
现在无论字号、主题还是进度，能设置但是不清楚怎么访问当前值？求老师指教。

提问者：VyingGao 2018-09-01 15:04

个回答

Sam: 2018-09-01 16:17:19

已采纳

可以参考官方提供的例子：

// 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;
});

Sam

2018-09-01 15:17:49

你好，这个问题需要使用Locations对象的locationFromCfi()来实现
```
locationFromCfi(cfi) : number
```
传入cfi即定位数据后获取对应的百分比，然后将百分比传入进度条控件即可

0

慕神7088389: 2019-03-07 18:13:11

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%`}

参考一下。