qq_慕数据4544929
2019-04-26 18:00
//progress 进度条的数值(0-100) onProgressChange: function (progress, tb) { vm.progress = progress; var percentage = progress / 100; vm.location = percentage > 0 ? vm.locations.cfiFromPercentage(percentage) : 0 if (tb == 1) { vm.rendition.display(vm.location); } console.log(vm.rendition.currentLocation()); }, onProgressInput: function (progress) { var percentage = progress / 100; vm.location = percentage > 0 ? vm.locations.cfiFromPercentage(percentage) : 0 vm.progress = progress; this.$refs.progress.style.backgroundSize = `${progress}% 100%`; }, //上一页 prevPage: function () { vm.rendition.prev().then(() => { var currentLocation = vm.rendition.currentLocation(); var cfi = currentLocation.start.cfi; vm.refreshLocation(cfi); var progress = Math.floor(((vm.locations.percentageFromCfi(currentLocation.start.cfi)).toFixed(5)) * 10000) / 100; vm.progress = progress; vm.onProgressInput(progress); }) }, //下一页 nextPage: function () { vm.rendition.next().then(() => { var currentLocation = vm.rendition.currentLocation(); var cfi = currentLocation.start.cfi; var progress = Math.floor(((vm.locations.percentageFromCfi(currentLocation.start.cfi)).toFixed(5)) * 10000) / 100; vm.refreshLocation(cfi); console.log(vm.section); vm.progress = progress; vm.onProgressInput(progress); }) },
//渲染图书 registerBook: function () { vm.bookName = localStorage.knowledgeId; var url = base_url + "/mobile/downloadFile.epub?userId=" + userId + "&method=getEpub&resourceId=" + vm.bookName; vm.book = ePub(url); // vm.book = ePub("../static/quan20.epub"); // console.log(vm.book); vm.rendition = vm.book.renderTo("reader", { width: window.innerWidth, height: vm.winHeight }); if (localStorage.getItem(vm.bookName+'progress')) { var tar = JSON.parse(localStorage.getItem(vm.bookName+'progress')); vm.book.rendition.display(tar.start.cfi); } else { localStorage.progress = 0; vm.book.rendition.display(); } vm.book.ready.then(() => { vm.navigation = vm.book.navigation;//目录 console.log(vm.navigation); //执行分页 return vm.book.locations.generate(750 * (window.innerWidth / 375)); }).then(result => { console.log(result); //获取locations对象 vm.locations = vm.book.locations; if (localStorage.getItem(vm.bookName)) { vm.bookmark = $.parseJSON(localStorage.getItem(vm.bookName)); var currentLocation = vm.rendition.currentLocation(); var cfi = currentLocation.start.cfi; vm.refreshLocation(cfi); } console.log(vm.locations); vm.bookAvailable = true; var pross = localStorage.progress; vm.onProgressChange(pross, 2); }) if (vm.rendition.themes) { vm.rendition.themes.fontSize(vm.defaultFontSize + 'px'); } vm.themeList.forEach(theme => { vm.rendition.themes.register(theme.name, theme.style) }) },
继续补充:浏览器中正常,手机测试就会出现问题。
感觉和设置字体大小有关系,现在是这样的情况。在渲染完图书之后设置默认字体的时候,翻上一页就会跳一章,去掉正常没问题。我尝试了去掉设置默认字体大小,此时翻页正常了,但是在手动点击设置字体大小时,还是会出现翻页异常的现象。请问什么原因?
补充一下:
if (vm.rendition.themes) { vm.rendition.themes.fontSize(vm.defaultFontSize + 'px'); }
去掉这个字体大小的 , 翻页就正常了。但是样式错乱。老师 请麻烦指点一下什么原因,谢谢。
快速入门Web阅读器开发
26396 学习 · 214 问题
相似问题