请稍等 ...
×

采纳答案成功!

向帮助你的同学说点啥吧!感谢那些助人为乐的人

this.rendition.on—touchstart、touchend ,next ,prev 等都没有作用,急等!

按照老师的建议,修改了epubjs的版本:“0.3.71” 问题还是不能解决。

正在回答

6回答

使用你的代码,可以正确捕获到touch事件,注意要启动手机模式

https://img.mukewang.com/szimg/5c4926390001b13a25921394.jpg

0 回复 有任何疑惑可以回复我~
  • 提问者 weixin_慕仔3569560 #1
    原来如此!非常感谢!如果要在PC上使用,能用epub里面的捕获事件吗?
    回复 有任何疑惑可以回复我~ 2019-01-24 11:04:06
  • Sam 回复 提问者 weixin_慕仔3569560 #2
    课程后面会介绍一种模板的做法,来解决PC和手机兼容的问题,另外,如果要使用Rendition.on的方案,可以捕获click事件,就可以同时支持PC和移动了
    回复 有任何疑惑可以回复我~ 2019-01-24 14:45:14
提问者 weixin_慕仔3569560 2019-01-24 10:18:13
<template>
<div>
<div id="read">
<!-- {{$route.params.fileName}} -->
<div class="ebook-reader"></div>
</div>
</div>
</template>

<script>
import Epub from "epubjs";
global.ePub = Epub;
import { mapGetters } from "vuex";

export default {
computed: {
...mapGetters(["fileName"])
},
methods: {
initEpub() {
const url = "" + this.fileName + ".epub";
console.log(url);
this.book = new Epub(url);
this.rendition = this.book.renderTo("read", {
width: innerWidth,
height: innerHeight,
method: "default"
});
this.rendition.display();
console.log(this.book);
console.log(this.rendition);
this.rendition.on("touchstart", event => {
console.log(event);
});
}
},
mounted() {
this.$store
.dispatch("setFileName", this.$route.params.fileName.split("|").join("/"))
.then(() => {
this.initEpub();
});
}
};
</script>

这是EbookReader.vue的代码,还需要别的吗?

0 回复 有任何疑惑可以回复我~
Sam 2019-01-24 10:01:53

麻烦提供源码

0 回复 有任何疑惑可以回复我~
提问者 weixin_慕仔3569560 2019-01-24 10:00:22

首页cover也出现了的。

0 回复 有任何疑惑可以回复我~
提问者 weixin_慕仔3569560 2019-01-24 09:58:31

book,rendition对象都生成了。但是console有violation的警告,不知有无关系:

iframe.js?ddea:371 [Violation] Avoid using document.write().

https://img.mukewang.com/szimg/5c491bc300012dc106670278.jpg

0 回复 有任何疑惑可以回复我~
Sam 2019-01-24 09:53:25

你好,可以查看一下日志,是否有报错信息?如果没有,依次排查Book、Rendition对象是否正确的生成,如果解析失败,是不能翻页或者支持手势的

0 回复 有任何疑惑可以回复我~
问题已解决,确定采纳
还有疑问,暂不采纳
意见反馈 帮助中心 APP下载
官方微信