You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
127 lines
4.8 KiB
127 lines
4.8 KiB
export default {
|
|
computed: {
|
|
currentProgress () {
|
|
return this.pages[this.current]?.progress || 0
|
|
},
|
|
currentTitle () {
|
|
return this.pages[this.current]?.title || this.title
|
|
},
|
|
currentTotal () {
|
|
return this.pages[this.current]?.total || 0
|
|
},
|
|
currentPage () {
|
|
return this.pages[this.current]?.current || 0
|
|
}
|
|
},
|
|
methods: {
|
|
//渲染页面
|
|
scrollRender ({chapter, current, start = 0}) {
|
|
if ( chapter ) {//如果传入章节内容
|
|
const index = this.chapters.findIndex(c => c.index == chapter.index)//是否已经包含相同章节
|
|
if (index > -1) this.chapters[index] = chapter//如果包含则更新
|
|
else this.chapters.push(chapter)//否则添加新章节
|
|
}
|
|
current = parseInt(current || 0)//强制转换类型为int
|
|
start = parseInt(start)//强制转换类型为int
|
|
this.pages = [{index: current, type: 'loading'}]//显示loading
|
|
this.current = 0//重置current
|
|
const cgs = this.chapters.filter(c => c.index == current || c.index == current - 1 || c.index == current + 1)//筛选出符合条件的三个章节内容
|
|
let index = 0, arr = []
|
|
const computedId = this.getComputedId()
|
|
this.computeds.push(computedId)
|
|
const computedIndex = this.computeds.indexOf(computedId)
|
|
this.$nextTick(function () {
|
|
setTimeout(() => {
|
|
const handle = () => {
|
|
this.$refs.computed[computedIndex] && this.$refs.computed[computedIndex].start({
|
|
chapter: cgs[index],
|
|
success: pages => {
|
|
arr = arr.concat(pages)
|
|
if ( index < cgs.length - 1 ) {
|
|
index++
|
|
this.$nextTick(function () { handle() })
|
|
} else {
|
|
this.computeds.splice(computedIndex, 1)
|
|
this.pages = this.handlePages(arr)
|
|
const pageIndex = this.pages.findIndex(p => start >= p.start && start < p.end && p.index == current )//定位章节
|
|
if ( pageIndex == -1 ) this.current = this.pages.findIndex(p => start >= p.end && p.index == current )//定位章节
|
|
else this.current = pageIndex
|
|
this.$nextTick(function () {
|
|
this.$refs.scroll.resetRefresh()
|
|
this.$refs.scroll.scrollToIndex(this.current)
|
|
this.handleChange({current: this.current, detail: this.pages[this.current] })
|
|
this.$nextTick(function () {
|
|
this.autoplaySync = this.autoplay
|
|
})
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
handle()
|
|
}, 100)
|
|
})
|
|
},
|
|
//翻页改变事件
|
|
async handleScroll (e) {
|
|
const scrollTop = e.detail.scrollTop
|
|
const scrollHeight = e.detail.scrollHeight
|
|
if ( !this.scrolling ) {
|
|
try{
|
|
this.scrolling = true
|
|
const rate = Math.floor(scrollTop / this.contentHeight)
|
|
let maybe = this.pages[rate] ? rate : this.pages.length-1
|
|
let top = -1
|
|
while ( top < 0 && maybe < this.pages.length - 1 ) {
|
|
const itemRect = await this.$refs.scroll.getItemRect(maybe)
|
|
top = itemRect.top
|
|
top < 0 ? maybe++ : null
|
|
}
|
|
const current = top >= 0 ? maybe : this.pages.length - 1
|
|
if ( current != this.current ) {
|
|
this.handleChange({current: current, detail: this.pages[current]})
|
|
this.$refs.footer && this.$refs.footer.refresh()
|
|
}
|
|
this.scrolling = false
|
|
}catch(e){
|
|
this.scrolling = false
|
|
}
|
|
}
|
|
},
|
|
//渲染下一章节
|
|
handleScrollLoadRender (status, chapter, callback, isPrev) {
|
|
if ( status == 'success' ) {//获取内容成功
|
|
const nowIndex = isPrev ? this.pages[0].index : this.pages[this.pages.length-1].index
|
|
const chapterIndex = this.chapters.findIndex(c => c.index == chapter.index)//是否已经包含相同章节
|
|
if (chapterIndex > -1) this.chapters[chapterIndex] = chapter//如果包含则更新
|
|
else this.chapters.push(chapter)//否则添加新章节
|
|
const computedId = this.getComputedId()
|
|
this.computeds.push(computedId)
|
|
const computedIndex = this.computeds.indexOf(computedId)
|
|
this.$nextTick(function () {
|
|
setTimeout(() => {
|
|
this.$refs.computed[computedIndex] && this.$refs.computed[computedIndex].start({
|
|
chapter: chapter,
|
|
success: p => {
|
|
this.computeds.splice(computedIndex, 1)
|
|
callback && callback( (chapter.isStart || chapter.isEnd) ? 'end' : status)//关闭加载动画
|
|
const pages = isPrev ? p.concat(this.pages) : this.pages.concat(p)//添加新计算的章节内容
|
|
this.pages = pages//渲染章节内容
|
|
if ( isPrev ) {//如果是加载上一章节需要重新定位
|
|
this.$nextTick(function () {
|
|
this.current = pages.findIndex(page => page.index == nowIndex)//定位页面
|
|
this.$refs.scroll.scrollToIndex(this.current)//刷新翻页组件
|
|
})
|
|
}
|
|
this.chapterLoading = false//关闭章节加载等待
|
|
}
|
|
})
|
|
}, 100)
|
|
})
|
|
} else {
|
|
this.chapterLoading = false//关闭章节加载等待
|
|
callback && callback(status)//关闭加载动画
|
|
}
|
|
}
|
|
}
|
|
}
|