分章节渲染

YM

2024-05-14 01670004fd1fee6137e5068dad6bd306603562a0

 src/books/childHealth/view/content/index.vue

@@ -1,22 +1,29 @@
<template>
  <div class="page-content">
    <chapterOne></chapterOne>
    <chapterTwo></chapterTwo>
    <!-- <chapterThree></chapterThree> -->
    <!-- <chapterFour></chapterFour> -->
    <!-- <chapterFive></chapterFive> -->
    <!-- <chapterSix></chapterSix>
    <chapterSeven></chapterSeven>
    <chapterEight></chapterEight>
    <chapterNine></chapterNine>
    <chapterTen></chapterTen>
    <chapterEleven></chapterEleven>
    <chapterTwelve></chapterTwelve>
    <chapterThirteen></chapterThirteen> -->
  <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";
@@ -31,11 +38,78 @@
import chapterTwelve from "./components/chapter012.vue";
import chapterThirteen from "./components/chapter013.vue";


import _ from "lodash";

export default {
  name: "temp-book",
  data() {
    return {
      catalogLength: 13, // 总章节数
      showCatalogList: [], // 显示的章节
      loadThreshold: 300, // 触发加载阈值
      throttleThreshold: 100, // 节流阈值
      previousScrollTop: 0,
      throttledScrollHandler: null
    };
  },
  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();
            }
          }
        }
      }
      console.log(this.showCatalogList);
      // 更新上一次滚动的位置
      this.previousScrollTop = event.target.scrollTop;
    }
  },
  components: {
    pageHeader,
    chapterOne,
    chapterTwo,
    chapterThree,
@@ -48,11 +122,21 @@
    chapterTen,
    chapterEleven,
    chapterTwelve,
    chapterThirteen,
  },
  methods: {
  },
    chapterThirteen
  }
};
</script>

<style lang="less" scoped></style>
<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>