老师，section与index是不一致的

来源：5-12 目录功能实现（多级目录功能）

慕码人1486145

2019-07-22

我用的自己下载的电子书资源，貌似出现了section对应的只有一级目录的，无论

refreshLocation () {
      const currentLocation = this.currentBook.rendition.currentLocation()
      const startCfi = currentLocation.start.cfi
      const progress = this.currentBook.locations.percentageFromCfi(startCfi)
      console.log('refresh', currentLocation)
      this.setSection(currentLocation.start.index)
      this.setProgress(Math.floor(progress * 100))
      saveLocation(this.fileName, startCfi)
    },//这里获取到的section

还是点击下一章或者上一章，都是切换的一级章节，导致与目录无法一一对应，让点击目录高亮和章节显示都有bug
github地址：https://github.com/shlroland/EBOOK

写回答

2回答

慕码人1486145

提问者

2019-07-23

用calibre这个软件看了下电子书的元数据，发现了这几个问题。第一，貌似在获取navigation的时候，epubjs会把开头的目录或者封面这样的章节给自动处理掉，但是section读取是按顺序读取的，所以导致了错位。第二，section是读取epub已经分好段的html文件，子章节只是其中分好的html的一个段落用id选择器跳转的，section这个api貌似只是简单读取了html文件，只能判断主要章节的位置，对于子章节的读取无能为力。

Sam

2019-07-22

你好，调试了一下你的源码，造成问题的原因是EbookSettingProgress.vue组件中阅读时间采用aboslute布局，覆盖了上一章和下一章按钮，解决的办法是将progress-wrapper增加z-index属性，使其在阅读时间之上即可，css如下：

.progress-wrapper {  
    position: relative;  
    z-index: 100;
    // ...
}

另外，建议把EbookReader.vue组件中epub电子书解析部分加上分类支持，源码如下：

const baseUrl = `${process.env.VUE_APP_RES_URL}/epub`
const [categoryName, bookName] = this.fileName.split('|')
const url = `${baseUrl}/${categoryName}/${bookName}.epub`

慕码人1486145

老师，您好。我用calibre这个软件看了下电子书的元数据，发现了这几个问题。第一，貌似在获取navigation的时候，epubjs会把开头的目录或者封面这样的章节给自动处理掉，但是section读取是按顺序读取的，所以导致了错位。第二，section是读取epub已经分好段的html文件，子章节只是其中分好的html的一个段落用id选择器跳转的，section这个api貌似只是简单读取了html文件，只能判断主要章节的位置，对于子章节的读取无能为力。

2019-07-23

共1条回复

Vue 实战商业级读书Web APP完整项目

Vue全家桶+最新前端技术+前后端分离架构，完整项目流程

1610 学习 · 1951 问题

查看课程

相似问题

是否可以根据当前所在的页数判断所处的章节，进而改变目录的高亮显示部分和进度处的章节部分？

回答 1

拖动进度条时，章节名称无法同步更新

回答 2

Cannot read property 'section' of null"

回答 1

对于一些中文电子书。用section 获取章节会错乱(并不准确)。

回答 1

老师请问this.currentBook.load.bind(this.currentBook)的作用是什么？

回答 1

打开慕课网App查看更多内容