Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout

闫增涛

2024-05-17 44545294897f707d00d9a1e8ea3ffd2af1595956

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

@@ -47,7 +47,8 @@
      loadThreshold: 300, // 触发加载阈值
      throttleThreshold: 100, // 节流阈值
      previousScrollTop: 0,
      throttledScrollHandler: null
      throttledScrollHandler: null,
      observer: null
    };
  },
  computed:{
@@ -70,6 +71,10 @@
            showCatalogList: newVal
          });
        }
        // 启动页码观察
        setTimeout(() => {
          this.initObservation();
        }, 500);
      }
    }
  },
@@ -100,6 +105,19 @@
      });
    }

    // 创建一个新的 Intersection Observer 实例，用于观察目标元素和执行相应的回调函数。
    // new IntersectionObserver(callback, options)：使用之前定义的 callback 回调函数和 options 配置选项来初始化 Intersection Observer 实例。
    this.observer = new IntersectionObserver(this.pageChangeCallback, {
      root: null, // 指定根元素，这里设为 null，表示选取整个视窗作为根元素。
      rootMargin: "0px", // 指定根元素的边界，这里设为 "0px"，表示根元素的边界和视窗的边界重合
      threshold: 0.5 // 指定交叉比例，这里设为 0.5，表示当目标元素一半或更多显示在视窗中时触发回调函数。
    });

    // 启动页码观察
    setTimeout(() => {
      this.initObservation();
    }, 500);

    // 测试页面跳转
    // setTimeout(() => {
    //   this.gotoPage(5, 100);
@@ -120,6 +138,7 @@
    // }, 3000);
  },
  methods: {
    // 滚动监听
    scrollFun(event) {
      // 判断向上滚动还是向下滚动
      if (event.target.scrollTop > this.previousScrollTop) {
@@ -163,16 +182,8 @@
      // showCatalogList 当前显示的三个章节，watch监听传递给主应用
      // 更新上一次滚动的位置
      this.previousScrollTop = event.target.scrollTop;

      // 返回页码和章节信息
      // if (this.$store.state.qiankun && this.$store.state.qiankun.pageChange)
      //   this.$store.state.qiankun.pageChange({
      //     page: 100,
      //     catalog: 5,
      //     catalogId: "",
      //     catalogName: ""
      //   });
    },
    // 章节、页面跳转
    gotoPage(catalog, page) {
      if (catalog >= 0 && catalog <= this.catalogLength) {
        // 处理渲染章节
@@ -202,6 +213,7 @@
        console.log("章节错误！");
      }
    },
    // 渲染标记
    renderSign(type, data) {
      const existence = (
        this.container ? this.container : document
@@ -237,6 +249,7 @@
        }
      }
    },
    // 删除标记渲染
    delSign({ ids, type }) {
      if (ids && ids.length) {
        for (let i = 0; i < ids.length; i++) {
@@ -262,6 +275,44 @@
          );
        }
      }
    },
    initObservation() {
      const sections = document.querySelectorAll(".page-box");
      //observer 观察每个元素，以便在它们进入或离开视窗时触发回调函数。
      sections.forEach((section) => {
        const isObserver = section.getAttribute("observer");
        if (!isObserver) {
          this.observer.observe(section);
          section.setAttribute("observer", "1");
        }
      });
    },
    pageChangeCallback(entries, observer) {
      //entries：代表观察到的目标元素的集合。 observer：代表观察者对象。
      entries.forEach((entry) => {
        //entry.isIntersecting：检查当前目标元素是否与根元素相交。
        if (entry.isIntersecting) {
          const target = entry.target;
          //entry.target：获取当前目标元素
          const page = target.getAttribute("page");
          const catalogDom = this.tool.getParentNodeByClassName(
            target,
            "chapter"
          );
          const catalog = catalogDom.getAttribute("num");
          console.log("page", page, catalog);
          // 返回页码和章节信息
          if (this.$store.state.qiankun && this.$store.state.qiankun.pageChange)
            this.$store.state.qiankun.pageChange({
              page: page,
              catalog: catalog
            });
          // const sections = Array.from(document.querySelectorAll(".section"));
          //sections：获取所有具有 .section 类名的元素，并转换为数组。
          // let index = sections.findIndex((section) => section === target) + 1;
          //index：查找当前目标元素在 sections 数组中的索引，并加 1，用于确定当前页码。
        }
      });
    }
  },
  components: {