页码

闫增涛

2024-05-28 a47e8ae08413b99a7fcd4195a535687234b0160f

 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"
@@ -66,6 +73,7 @@
      ></chapterTwelve>
      <chapterThirteen
        v-if="showCatalogList.indexOf(13) > -1"
        :showPageList="loadPageList"
      ></chapterThirteen>
    </div>
  </div>
@@ -102,12 +110,15 @@
      observer: null,
      loadPageObserver: null,
      loadPageList: [],
      questionData: {},
      questionData: {}
    };
  },
  provide() {
    return {
      changeQuestionData:this.changeQuestionData
  computed: {
    fontSize() {
      return this.$store.state.qiankun.fontSize;
    },
    pageZoom() {
      return this.$store.state.qiankun.scale / 100;
    }
  },
  watch: {
@@ -119,7 +130,7 @@
        ) {
          // 调用父层方法
          this.$store.state.qiankun.catalogChange({
            showCatalogList: newVal,
            showCatalogList: newVal
          });
        }
        // 启动页码观察
@@ -127,8 +138,8 @@
          this.initObservation();
          this.initThemeColor();
        }, 500);
      },
    },
      }
    }
  },
  mounted() {
    // 默认加载章节
@@ -153,7 +164,7 @@
        // 删除笔记、高亮、划线
        delSign: (data) => {
          this.delSign(data);
        },
        }
      });
    }

@@ -162,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，表示当目标元素一半或更多显示在视窗中时触发回调函数。
    });

    // 启动页码观察
@@ -252,7 +263,7 @@
          this.showCatalogList = [
            this.catalogLength - 2,
            this.catalogLength - 1,
            this.catalogLength,
            this.catalogLength
          ];
        } else {
          this.showCatalogList = [catalog - 1, catalog, catalog + 1];
@@ -341,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");
@@ -454,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 类名的元素，并转换为数组。
@@ -482,19 +503,16 @@
            const catalog = catalogDom.getAttribute("num");
            if (!this.questionData[page]) {
              if (testData && testData[catalog]) {
                console.log(testData[catalog]);
                if (testData[catalog][page]) {
                  console.log(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]) {
                      console.log("key", key, testData[catalog][page][key]);
                      obj[key] = await getQuestionList(
                        [],
                        testData[catalog][page][key],
@@ -507,18 +525,13 @@
              }
            }
            this.loadPageList.push(Number(page));
            console.log(this.loadPageList, "this.loadPageList", catalog);
            if (this.loadPageList.length > 5) {
              // 超过三章隐藏顶部一章
              // 超过5页
              this.loadPageList.shift();
            }
          }
        }
      });
    },
    changeQuestionData(page,data) {
      console.log('变化',page,data);
      this.$props.questionData[page] = data
    },
  },
  components: {
@@ -535,8 +548,8 @@
    chapterTen,
    chapterEleven,
    chapterTwelve,
    chapterThirteen,
  },
    chapterThirteen
  }
};
</script>