<template>
|
<div class="page-main" @scroll="throttledScrollHandler">
|
<div class="page-content">
|
<pageHeader v-if="showCatalogList.indexOf(0) > -1"></pageHeader>
|
<chapterOne v-if="showCatalogList.indexOf(1) > -1"></chapterOne>
|
<chapterOne v-if="showCatalogList.indexOf(1) > -1"></chapterOne>
|
<chapterTwo v-if="showCatalogList.indexOf(2) > -1"></chapterTwo>
|
<chapterThree v-if="showCatalogList.indexOf(3) > -1"></chapterThree>
|
<chapterFour v-if="showCatalogList.indexOf(4) > -1"></chapterFour>
|
<chapterFive v-if="showCatalogList.indexOf(5) > -1"></chapterFive>
|
<chapterSix v-if="showCatalogList.indexOf(6) > -1"></chapterSix>
|
<chapterSeven v-if="showCatalogList.indexOf(7) > -1"></chapterSeven>
|
<chapterEight v-if="showCatalogList.indexOf(8) > -1"></chapterEight>
|
<chapterNine v-if="showCatalogList.indexOf(9) > -1"></chapterNine>
|
<chapterTen v-if="showCatalogList.indexOf(10) > -1"></chapterTen>
|
<chapterEleven v-if="showCatalogList.indexOf(11) > -1"></chapterEleven>
|
<chapterTwelve v-if="showCatalogList.indexOf(12) > -1"></chapterTwelve>
|
<chapterThirteen
|
v-if="showCatalogList.indexOf(13) > -1"
|
></chapterThirteen>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import pageHeader from "./components/header.vue";
|
import chapterOne from "./components/chapter001.vue";
|
import chapterTwo from "./components/chapter002.vue";
|
import chapterThree from "./components/chapter003.vue";
|
import chapterFour from "./components/chapter0004.vue";
|
import chapterFive from "./components/chapter005.vue";
|
import chapterSix from "./components/chapter006.vue";
|
import chapterSeven from "./components/chapter007.vue";
|
import chapterEight from "./components/chapter008.vue";
|
import chapterNine from "./components/chapter009.vue";
|
import chapterTen from "./components/chapter010.vue";
|
import chapterEleven from "./components/chapter011.vue";
|
import chapterTwelve from "./components/chapter012.vue";
|
import chapterThirteen from "./components/chapter013.vue";
|
|
import _ from "lodash";
|
|
export default {
|
data() {
|
return {
|
catalogLength: 13, // 总章节数
|
showCatalogList: [], // 显示的章节
|
loadThreshold: 300, // 触发加载阈值
|
throttleThreshold: 100, // 节流阈值
|
previousScrollTop: 0,
|
throttledScrollHandler: null,
|
};
|
},
|
watch: {
|
showCatalogList: {
|
handler(newVal) {
|
console.log("显示章节", newVal);
|
this.$store.state.qiankun.windowSelection({
|
showCatalogList: newVal,
|
});
|
},
|
},
|
},
|
mounted() {
|
// 默认加载章节
|
this.showCatalogList = [0];
|
// 滚动监听节流
|
this.throttledScrollHandler = _.throttle(
|
this.scrollFun,
|
this.throttleThreshold,
|
{ leading: true, trailing: false }
|
);
|
},
|
methods: {
|
scrollFun(e) {
|
// 判断向上滚动还是向下滚动
|
if (event.target.scrollTop > this.previousScrollTop) {
|
console.log("向下滚动");
|
const currentScrollTop =
|
event.target.scrollTop + event.target.offsetHeight;
|
if (
|
currentScrollTop >=
|
event.target.scrollHeight - this.loadThreshold
|
) {
|
// 到达阈值
|
if (
|
this.showCatalogList[this.showCatalogList.length - 1] <
|
this.catalogLength
|
) {
|
// 加载下一章
|
this.showCatalogList.push(
|
this.showCatalogList[this.showCatalogList.length - 1] + 1
|
);
|
if (this.showCatalogList.length > 3) {
|
// 超过三章隐藏顶部一章
|
this.showCatalogList.shift();
|
}
|
}
|
}
|
} else if (event.target.scrollTop < this.previousScrollTop) {
|
console.log("向上滚动");
|
const currentScrollTop = event.target.scrollTop;
|
if (currentScrollTop <= this.loadThreshold) {
|
// 到达阈值
|
if (this.showCatalogList[0] > 0) {
|
// 加载上一章
|
this.showCatalogList.unshift(this.showCatalogList[0] - 1);
|
if (this.showCatalogList.length > 3) {
|
// 超过三章隐藏底部一章
|
this.showCatalogList.pop();
|
}
|
}
|
}
|
}
|
// showCatalogList 当前显示的三个章节，watch监听传递给主应用
|
console.log(this.showCatalogList);
|
// 更新上一次滚动的位置
|
this.previousScrollTop = event.target.scrollTop;
|
},
|
},
|
components: {
|
pageHeader,
|
chapterOne,
|
chapterTwo,
|
chapterThree,
|
chapterFour,
|
chapterFive,
|
chapterSix,
|
chapterSeven,
|
chapterEight,
|
chapterNine,
|
chapterTen,
|
chapterEleven,
|
chapterTwelve,
|
chapterThirteen,
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.page-main {
|
width: 100%;
|
height: 100%;
|
overflow: auto;
|
.page-content {
|
max-width: 816px;
|
min-width: 375px;
|
margin: 0 auto;
|
padding-bottom: 100px;
|
}
|
}
|
</style>
|
