优化

闫增涛

2024-05-27 e260bcc1eac42ca8eb7f519148a42c945607d2a2

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

@@ -1,19 +1,58 @@
<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>
      <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>
      <pageHeader
        v-if="showCatalogList.indexOf(0) > -1"
        :showPageList="loadPageList"
      ></pageHeader>
      <chapterOne
        v-if="showCatalogList.indexOf(1) > -1"
        :showPageList="loadPageList"
      ></chapterOne>
      <chapterTwo
        v-if="showCatalogList.indexOf(2) > -1"
        :showPageList="loadPageList"
      ></chapterTwo>
      <chapterThree
        v-if="showCatalogList.indexOf(3) > -1"
        :showPageList="loadPageList"
      ></chapterThree>
      <chapterFour
        v-if="showCatalogList.indexOf(4) > -1"
        :showPageList="loadPageList"
      ></chapterFour>
      <chapterFive
        v-if="showCatalogList.indexOf(5) > -1"
        :showPageList="loadPageList"
      ></chapterFive>
      <chapterSix
        v-if="showCatalogList.indexOf(6) > -1"
        :showPageList="loadPageList"
      ></chapterSix>
      <chapterSeven
        v-if="showCatalogList.indexOf(7) > -1"
        :showPageList="loadPageList"
      ></chapterSeven>
      <chapterEight
        v-if="showCatalogList.indexOf(8) > -1"
        :showPageList="loadPageList"
      ></chapterEight>
      <chapterNine
        v-if="showCatalogList.indexOf(9) > -1"
        :showPageList="loadPageList"
      ></chapterNine>
      <chapterTen
        v-if="showCatalogList.indexOf(10) > -1"
        :showPageList="loadPageList"
      ></chapterTen>
      <chapterEleven
        v-if="showCatalogList.indexOf(11) > -1"
        :showPageList="loadPageList"
      ></chapterEleven>
      <chapterTwelve
        v-if="showCatalogList.indexOf(12) > -1"
        :showPageList="loadPageList"
      ></chapterTwelve>
      <chapterThirteen
        v-if="showCatalogList.indexOf(13) > -1"
      ></chapterThirteen>
@@ -47,7 +86,9 @@
      throttleThreshold: 100, // 节流阈值
      previousScrollTop: 0,
      throttledScrollHandler: null,
      observer: null
      observer: null,
      loadPageObserver: null,
      loadPageList: []
    };
  },
  watch: {
@@ -103,6 +144,12 @@
      root: null, // 指定根元素，这里设为 null，表示选取整个视窗作为根元素。
      rootMargin: "0px", // 指定根元素的边界，这里设为 "0px"，表示根元素的边界和视窗的边界重合
      threshold: 0.5 // 指定交叉比例，这里设为 0.5，表示当目标元素一半或更多显示在视窗中时触发回调函数。
    });

    this.loadPageObserver = new IntersectionObserver(this.loadPageCallback, {
      root: null, // 指定根元素，这里设为 null，表示选取整个视窗作为根元素。
      rootMargin: "0px", // 指定根元素的边界，这里设为 "0px"，表示根元素的边界和视窗的边界重合
      threshold: 0 // 指定交叉比例，这里设为 0.5，表示当目标元素一半或更多显示在视窗中时触发回调函数。
    });

    // 启动页码观察
@@ -237,7 +284,7 @@
            // 笔记
            pageDom.innerHTML = pageDom.innerHTML.replace(
              reg,
              `<span datatype="Note" dataid="${data.id}" style="border-bottom-color:${data.color}" class="notesline" onclick="signClick('Note','${data.id}','${data.chapterNum}')" onmouseover="noteHover('Note','${data.id}','${data.chapterNum}')">${data.txt}<img src="${NoteIcon}" style="cursor: pointer" /></span>`
              `<span datatype="Note" dataid="${data.id}" style="border-bottom-color:${data.color}" class="notesline" onclick="signClick('Note','${data.id}','${data.chapterNum}')" onmouseover="noteHover('Note','${data.id}','${data.chapterNum}')">${data.txt}<img src="${NoteIcon}"/></span>`
            );
            break;
        }
@@ -277,9 +324,14 @@
      sections.forEach((section) => {
        //observer 观察每个元素，以便在它们进入或离开视窗时触发回调函数。
        const isObserver = section.getAttribute("observer");
        const isLoadObserver = section.getAttribute("loadObserver");
        if (!isObserver) {
          this.observer.observe(section);
          section.setAttribute("observer", "1");
        }
        if (!isLoadObserver) {
          this.loadPageObserver.observe(section);
          section.setAttribute("loadObserver", "1");
        }
      });
    },
@@ -396,6 +448,18 @@
          //index：查找当前目标元素在 sections 数组中的索引，并加 1，用于确定当前页码。
        }
      });
    },
    loadPageCallback(entries, observer) {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          const target = entry.target;
          const page = target.getAttribute("page");
          if (this.loadPageList.indexOf(page) == -1) {
            this.loadPageList.push(page);
            console.log(this.loadPageList,"this.loadPageList");
          }
        }
      });
    }
  },
  components: {