this.rendition.currentLocation().start中有个index属性 应该是表示 第几个目录

then参数函数会延迟执行，看看promise

应该是你的 jumpTo 传递有问题

已经解决了，是ref="menuBar"拼写错误

解决了吗，我也有相同的问题

你好，可以通过课程源码学习：https://github.com/sam9831/free-ebook-demo

谢谢你继续扩展阅读器的功能

你好，需要使用Locations对象来实现

this.rendition.next().then(() => {  
  // 获取当前的位置信息  
  const currentLocation = this.rendition.currentLocation()  
  // 获取当前位置的进度百分比  
  this.progress = this.locations.percentageFromCfi(currentLocation.start.cfi)
})

将progress与input滑块绑定，这样就可以在更新progress后，自动更新进度条了

具体实现思路和原理可以查看我近期发布的一篇手记：https://www.imooc.com/article/255112

你好，需要使用Locations对象来实现

this.rendition.next().then(() => {
  // 获取当前的位置信息
  const currentLocation = this.rendition.currentLocation()
  // 获取当前位置的进度百分比
  this.progress = this.locations.percentageFromCfi(currentLocation.start.cfi)}
)

将progress与input滑块绑定，这样就可以在更新progress后，自动更新进度条了

具体实现思路和原理可以查看我近期发布的一篇手记：https://www.imooc.com/article/255112

看报错可能是包没有安装好，可以考虑把node_modules删除后重新install尝试

你好，第一个问题，start表示当前页的起始位置，end表示当前页的末尾位置，第二个问题，需要看下你的源码，应该是你调用Rendition.currentLocation() 的时机有问题，没有选择到正确的钩子函数

Navigation对象的用途是提供电子书的目录信息，Navigation类中的toc属性存储了目录结构，里面有6个重要属性：

• id：目录的id

• label：目录的名称

• href：目录的定位，通过Rendition.display(href)可以直接定位到目录所在位置

• deep：目录的层级

• subitems：子目录

• parent：父目录的id

这些属性对组织整个目录结构都很重要哦

你好，这个问题涉及epubjs的实现原理

• book.ready的用途：

this.book.ready返回的是一个Promise对象，他的作用是让我们可以在Book对象初始化完毕后实现我们自己的逻辑，this.book.ready对应的源码如下：

this.ready = Promise.all([
 this.loaded.manifest,
 this.loaded.spine,
 this.loaded.metadata,
 this.loaded.cover,
 this.loaded.navigation,
 this.loaded.resources
]);

可以看到ready的定义是当manifest、spine、metadata、cover、navigation、resources这些资源都加载完毕后才会执行。

• Locations.generate()方法的用途：

generate()是Locations对象的一个方法，Locations对象的主要作用是实现电子书的定位，Locations对象在Book对象中进行实例化，实例化的源码如下：

this.locations = new Locations(this.spine, this.load.bind(this));

所以我们需要通过this.book.locations来引用Locations对象，generate()方法的用途是生成分页，其主要用途是根据指定字数进行分页，如果不指定参数时，默认会按照200个字符进行分页，generate()会返回一个Promise对象，你可以打印一下返回结果就知道生成的内容了。

this.book.ready.then(() => {
  return this.book.locations.generate(500)
}).then(location => {
  console.log(location)
})

你好，Content.vue代码不多，主要是做目录的展示，这里我提供一份源码供你参考

<template>
  <transition name="slide-right">
    <div class="content">
      <div class="content-wrapper" v-if="bookAvailable">
        <div class="content-item" v-for="(item, index) in navigation.toc" :key="index" @click="jumpTo(item.href)">
          <span class="text">{{item.label}}</span>
        </div>
      </div>
      <div class="empty" v-else>加载中...</div>
    </div>
  </transition>
</template>

<script type="text/ecmascript-6">
 export default {
 props: {
 ifShowContent: Boolean,
      navigation: Object,
      bookAvailable: Boolean
 },
    methods: {
 jumpTo(target) {
 this.$emit('jumpTo', target)
 }
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
 @import "../assets/styles/global";
  .content {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 102;
    width: 80%;
    height: 100%;
    background: white;
    .content-wrapper {
      width: 100%;
      height: 100%;
      overflow: auto;
      .content-item {
        padding: px2rem(20) px2rem(15);
        border-bottom: px2rem(1) solid #f4f4f4;
        .text {
          font-size: px2rem(14);
          color: #333;
        }
      }
    }
    .empty {
      width: 100%;
      height: 100%;
      @include center;
      font-size: px2rem(16);
      color: #333;
    }
  }
</style>