//progress?進度條的數(shù)值(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);
????????//執(zhí)行分頁
????????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)
????})
},
2019-04-29
繼續(xù)補充:瀏覽器中正常,手機測試就會出現(xiàn)問題。
2019-04-29
感覺和設(shè)置字體大小有關(guān)系,現(xiàn)在是這樣的情況。在渲染完圖書之后設(shè)置默認(rèn)字體的時候,翻上一頁就會跳一章,去掉正常沒問題。我嘗試了去掉設(shè)置默認(rèn)字體大小,此時翻頁正常了,但是在手動點擊設(shè)置字體大小時,還是會出現(xiàn)翻頁異常的現(xiàn)象。請問什么原因?
2019-04-28
補充一下:??
去掉這個字體大小的 , 翻頁就正常了。但是樣式錯亂。老師 請麻煩指點一下什么原因,謝謝。