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

来源:3-11 阅读进度功能实现

VyingGao

2018-09-01 15:04

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

写回答 关注

3回答

  • 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即定位数据后获取对应的百分比,然后将百分比传入进度条控件即可


    qq_慕数据... 回复qq_慕数据...

    已解决

    2019-03-27 10:38:53

    共 6 条回复 >

  • 慕神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%`}

    参考一下。

    淡水狗

    哈哈哈谢谢你给了思路。在我的改进下可以运行了

    2019-05-22 15:08:25

    共 1 条回复 >

快速入门Web阅读器开发

带你了解电子书阅读器的工作原理,通过Vue.js快速实现Web阅读器

26251 学习 · 214 问题

查看课程

相似问题