优化

unknown

2024-05-29 af7bdeccc0cc3aa44515b942b7ec05545299ae49

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

@@ -1,6 +1,13 @@
<template>
  <div class="page-main" @scroll="throttledScrollHandler">
    <div class="page-content">
    <div
      class="page-content"
      :style="{
        fontSize: fontSize ? fontSize + 'px' : '16px',
        transform: `scale(${pageZoom ? pageZoom : 1})`,
        transformOrigin: 'center top',
      }"
    >
      <pageHeader
        v-if="showCatalogList.indexOf(0) > -1"
        :showPageList="loadPageList"
@@ -8,46 +15,57 @@
      <chapterOne
        v-if="showCatalogList.indexOf(1) > -1"
        :showPageList="loadPageList"
        :questionData="questionData"
      ></chapterOne>
      <chapterTwo
        v-if="showCatalogList.indexOf(2) > -1"
        :showPageList="loadPageList"
        :questionData="questionData"
      ></chapterTwo>
      <chapterThree
        v-if="showCatalogList.indexOf(3) > -1"
        :showPageList="loadPageList"
        :questionData="questionData"
      ></chapterThree>
      <chapterFour
        v-if="showCatalogList.indexOf(4) > -1"
        :showPageList="loadPageList"
        :questionData="questionData"
      ></chapterFour>
      <chapterFive
        v-if="showCatalogList.indexOf(5) > -1"
        :showPageList="loadPageList"
        :questionData="questionData"
      ></chapterFive>
      <chapterSix
        v-if="showCatalogList.indexOf(6) > -1"
        :showPageList="loadPageList"
        :questionData="questionData"
      ></chapterSix>
      <chapterSeven
        v-if="showCatalogList.indexOf(7) > -1"
        :showPageList="loadPageList"
        :questionData="questionData"
      ></chapterSeven>
      <chapterEight
        v-if="showCatalogList.indexOf(8) > -1"
        :showPageList="loadPageList"
        :questionData="questionData"
      ></chapterEight>
      <chapterNine
        v-if="showCatalogList.indexOf(9) > -1"
        :showPageList="loadPageList"
        :questionData="questionData"
      ></chapterNine>
      <chapterTen
        v-if="showCatalogList.indexOf(10) > -1"
        :showPageList="loadPageList"
        :questionData="questionData"
      ></chapterTen>
      <chapterEleven
        v-if="showCatalogList.indexOf(11) > -1"
        :showPageList="loadPageList"
        :questionData="questionData"
      ></chapterEleven>
      <chapterTwelve
        v-if="showCatalogList.indexOf(12) > -1"
@@ -55,6 +73,7 @@
      ></chapterTwelve>
      <chapterThirteen
        v-if="showCatalogList.indexOf(13) > -1"
        :showPageList="loadPageList"
      ></chapterThirteen>
    </div>
  </div>
@@ -77,6 +96,8 @@
import chapterThirteen from "./components/chapter013.vue";
import NoteIcon from "@/assets/images/biji.png";
import _ from "lodash";
import getQuestionList from "@/assets/methods/examination";
import testData from "../../assets/examinationList";
export default {
  data() {
    return {
@@ -88,8 +109,17 @@
      throttledScrollHandler: null,
      observer: null,
      loadPageObserver: null,
      loadPageList: []
      loadPageList: [],
      questionData: {},
    };
  },
  computed: {
    fontSize() {
      return this.$store.state.qiankun.fontSize;
    },
    pageZoom() {
      return this.$store.state.qiankun.scale / 100;
    },
  },
  watch: {
    showCatalogList: {
@@ -100,7 +130,7 @@
        ) {
          // 调用父层方法
          this.$store.state.qiankun.catalogChange({
            showCatalogList: newVal
            showCatalogList: newVal,
          });
        }
        // 启动页码观察
@@ -108,8 +138,8 @@
          this.initObservation();
          this.initThemeColor();
        }, 500);
      }
    }
      },
    },
  },
  mounted() {
    // 默认加载章节
@@ -134,7 +164,7 @@
        // 删除笔记、高亮、划线
        delSign: (data) => {
          this.delSign(data);
        }
        },
      });
    }

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

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

    // 启动页码观察
@@ -233,7 +263,7 @@
          this.showCatalogList = [
            this.catalogLength - 2,
            this.catalogLength - 1,
            this.catalogLength
            this.catalogLength,
          ];
        } else {
          this.showCatalogList = [catalog - 1, catalog, catalog + 1];
@@ -284,7 +314,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}"/></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}')" onmouseout="noteOut">${data.txt}<img src="${NoteIcon}"/></span>`
            );
            break;
        }
@@ -322,6 +352,16 @@
        this.container ? this.container : document
      ).querySelectorAll(".page-box");
      sections.forEach((section) => {
        if (this.config.activeBook && this.config.activeBook.tryPageCount) {
          const page = section.getAttribute("page");
          if (Number(page) > this.config.activeBook.tryPageCount) {
            let chapterDom = this.getParentWithClass(section, "chapter");
            const chapterNum = chapterDom.getAttribute("num");
            this.catalogLength = Number(chapterNum) - 1;
            section.remove();
            return false;
          }
        }
        //observer 观察每个元素，以便在它们进入或离开视窗时触发回调函数。
        const isObserver = section.getAttribute("observer");
        const isLoadObserver = section.getAttribute("loadObserver");
@@ -435,12 +475,12 @@
            "chapter"
          );
          const catalog = catalogDom.getAttribute("num");
          console.log("page", page, catalog);
          console.log(page, "page", catalog, "catalog");
          // 返回页码和章节信息
          if (this.$store.state.qiankun && this.$store.state.qiankun.pageChange)
            this.$store.state.qiankun.pageChange({
              page: page,
              catalog: catalog
              catalog: catalog,
            });
          // const sections = Array.from(document.querySelectorAll(".section"));
          //sections：获取所有具有 .section 类名的元素，并转换为数组。
@@ -450,21 +490,49 @@
      });
    },
    loadPageCallback(entries, observer) {
      entries.forEach((entry) => {
      entries.forEach(async (entry) => {
        if (entry.isIntersecting) {
          const target = entry.target;
          const page = target.getAttribute("page");
          if (this.loadPageList.indexOf(page) == -1) {
            //
            const catalogDom = this.tool.getParentNodeByClassName(
              target,
              "chapter"
            );
            const catalog = catalogDom.getAttribute("num");
            if (!this.questionData[page]) {
              if (testData && testData[catalog]) {
                if (testData[catalog][page]) {
                  if (Array.isArray(testData[catalog][page])) {
                    this.questionData[page] = await getQuestionList(
                      page,
                      testData[catalog][page],
                      this.config.activeBook
                    );
                  } else {
                    const obj = {};
                    for (let key in testData[catalog][page]) {
                      obj[key] = await getQuestionList(
                        [],
                        testData[catalog][page][key],
                        this.config.activeBook
                      );
                    }
                    this.questionData[page] = obj;
                  }
                }
              }
            }
            this.loadPageList.push(Number(page));
            console.log(this.loadPageList,"this.loadPageList");
            if (this.loadPageList.length > 5) {
              // 超过三章隐藏顶部一章
              // 超过5页
              this.loadPageList.shift();
            }
          }
        }
      });
    }
    },
  },
  components: {
    pageHeader,
@@ -480,8 +548,8 @@
    chapterTen,
    chapterEleven,
    chapterTwelve,
    chapterThirteen
  }
    chapterThirteen,
  },
};
</script>