<template>
<view>
<readSetting :directoryName="chapterNames" ref="readSetting" :book="reader['book']" @changePage="changePage"
:isPageLoading="isPageLoading">
<view style="width: 100%;">
<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scroll="scroll"
@scrolltolower="lower" style="width: 100vw;">
<muqian-lazyLoad class="textRead" :src="item.img_url" :indexs="index + 1" width="100vw"
height="100%" :chapter_index="index + 1" v-for="(item, index) in contents" :key="item.img_url"
@imageClick="imageClick"></muqian-lazyLoad>
<!-- </view> -->
</scroll-view>
</view>
</readSetting>
</view>
</template>
<script>
import readSetting from "@/components/readSetting/readSetting.vue"
export default {
components: {
readSetting
},
data() {
return {
currentChapter: '',
pages: 1, // 当前页码
total: 1, // 全部页数
chapterName: '', // 当前章节名称
chapterNames: "",
loading: true,
contents: [],
scrollTop: 0,
windowWidth: 0,
statusBarHeight: 0,
triggered: true,
_freshing: false,
isPageLoading: false,
currentCount: 1,
rightDomsTop: []
}
},
onReady() {
setTimeout(() => {
this.getOnlineContent(this.currentChapter, true)
}, 100)
},
methods: {
scroll(e) {
this.rightDomsTop.forEach(v => {
if (-v.top < e.detail.scrollTop) {
this.chapterNames = v.chapter_name
return false
}
})
},
getOnlineContent() {
this.$api.getChapterDetail().then(res => {
const {
page_result,
photo_list
} = JSON.parse(res.data)
this.contents = this.contents.concat(photo_list)
this.$nextTick(() => {
this.getElInfo({
size: false,
rect: true
}).then(res => {
let data = {
...res,
chapter_name: photo_list[photo_list.length - 1].chapter_name
}
this.rightDomsTop.push(data)
this.chapterNames = this.rightDomsTop[this.rightDomsTop.length - 1]
.chapter_name
})
})
})
},
// 获取节点信息
getElInfo(obj = {}) {
return new Promise((res, rej) => {
let option = {
size: obj.size ? true : false,
rect: obj.rect ? true : false,
scrollOffset: obj.scrollOffset ? true : false,
}
const query = uni.createSelectorQuery().in(this);
let q = query.select('.textRead')
q.fields(option, data => {
res(data)
}).exec();
})
},
lower: function(e) {
//懒加载
},
}
}
</script>
<style>
.scroll-Y {
height: 100vh;
}
.flex—info {
display: flex;
flex-direction: column;
}
</style>
主要思路就是获取每一章加载后的top