为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

正在回答

3 回答

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

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


0 回复 有任何疑惑可以回复我~

你好,这个问题需要使用Locations对象的locationFromCfi()来实现

locationFromCfi(cfi) : number

传入cfi即定位数据后获取对应的百分比,然后将百分比传入进度条控件即可


0 回复 有任何疑惑可以回复我~
#1

VyingGao 提问者

怎么获取cfi定位数据?
2018-09-01 回复 有任何疑惑可以回复我~
#2

Sam 回复 VyingGao 提问者

我们已经通过Locations.generate()生成了cfi的数组,cfi表示位置,通过locationFromCfi方法我们可以获取该位置对应的进度百分比
2018-09-01 回复 有任何疑惑可以回复我~
#3

VyingGao 提问者 回复 Sam

Cannot read property 'steps' of undefined。
2018-09-01 回复 有任何疑惑可以回复我~
#4

VyingGao 提问者 回复 Sam

我把generate()生成了cfi的数组传入locationFromCfi方法里面,就报错了。
2018-09-01 回复 有任何疑惑可以回复我~
#5

qq_慕数据4544929 回复 VyingGao 提问者

请问一下,你这个翻页触发进度条变化的问题解决了吗?求指教
2019-03-27 回复 有任何疑惑可以回复我~
#6

qq_慕数据4544929 回复 qq_慕数据4544929

已解决
2019-03-27 回复 有任何疑惑可以回复我~
查看3条回复
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%`}

参考一下。

0 回复 有任何疑惑可以回复我~
#1

淡水狗

哈哈哈谢谢你给了思路。在我的改进下可以运行了
2019-05-22 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

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

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信