在翻页的时候,跨目录翻上一页的时候会跳一整章(即 比如从第三章开始翻上一页会到第二章的最开始).请问老师怎么解决这个问题?

来源:-

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)
    })
},


写回答 关注

3回答

  • qq_慕数据4544929
    2019-04-29 17:59:46

    继续补充:浏览器中正常,手机测试就会出现问题。

    kk305c...

    请问这个问题有解决吗?

    2019-12-20 13:35:57

    共 1 条回复 >

  • qq_慕数据4544929
    2019-04-29 10:32:50

    感觉和设置字体大小有关系,现在是这样的情况。在渲染完图书之后设置默认字体的时候,翻上一页就会跳一章,去掉正常没问题。我尝试了去掉设置默认字体大小,此时翻页正常了,但是在手动点击设置字体大小时,还是会出现翻页异常的现象。请问什么原因?

  • qq_慕数据4544929
    2019-04-28 16:53:12

    补充一下:  

    if (vm.rendition.themes) {
        vm.rendition.themes.fontSize(vm.defaultFontSize + 'px');
    }

    去掉这个字体大小的 , 翻页就正常了。但是样式错乱。老师 请麻烦指点一下什么原因,谢谢。

快速入门Web阅读器开发

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

26237 学习 · 214 问题

查看课程

相似问题