高亮跳转

YM

2024-05-31 9b9677838792e6cf8992ab042fce8c1c071af7a5

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

@@ -109,7 +109,7 @@
export default {
  data() {
    return {
      catalogLength: 13, // 总章节数
      catalogLength: 14, // 总章节数
      showCatalogList: [], // 显示的章节
      loadThreshold: 300, // 触发加载阈值
      throttleThreshold: 100, // 节流阈值
@@ -119,7 +119,8 @@
      loadPageObserver: null,
      loadPageList: [],
      questionDataMap: {},
      renderSignMap: {}
      renderSignMap: {},
      highlightData: null
    };
  },
  computed: {
@@ -208,7 +209,7 @@
    }, 500);

    // 测试页面跳转
    setTimeout(() => {
    // setTimeout(() => {
      //   this.gotoPage(1, 10);
      //   setTimeout(() => {
      //     this.renderSign("Highlight", {
@@ -231,13 +232,13 @@
      // 检索
      // console.log(this.searchTextByPage("保护内脏器官"), "searchTextByPage");
      // 检索跳转
      this.searchItemLocation({
        catalog: 2,
        page: 10,
        txt: " 运动系统是由骨、骨连结和骨骼肌三部分组成的。全身的骨通过骨连结组成人体骨骼（见图1-1）。骨骼是人体的支架，具有保护内脏器官、供肌肉附着和作为肌肉运动的杠杆等作用。在神经系统的支配下，肌肉收缩牵动所附着的骨绕着关节转动，使身体产生各种动作。所以，运动系统具有运动、支持和保护等功能，幼年时期的骨骼还具有造血功能。 ",
        txtIndex: 57
      });
    }, 5000);
      // this.searchItemLocation({
      //   catalog: 2,
      //   page: 10,
      //   txt: " 运动系统是由骨、骨连结和骨骼肌三部分组成的。全身的骨通过骨连结组成人体骨骼（见图1-1）。骨骼是人体的支架，具有保护内脏器官、供肌肉附着和作为肌肉运动的杠杆等作用。在神经系统的支配下，肌肉收缩牵动所附着的骨绕着关节转动，使身体产生各种动作。所以，运动系统具有运动、支持和保护等功能，幼年时期的骨骼还具有造血功能。 ",
      //   txtIndex: 57
      // });
    // }, 5000);
  },
  methods: {
    // 滚动监听
@@ -286,7 +287,7 @@
      this.previousScrollTop = event.target.scrollTop;
    },
    // 章节、页面跳转
    gotoPage(catalog, page, callback) {
    gotoPage(catalog, page) {
      if (catalog >= 0 && catalog <= this.catalogLength) {
        // 处理渲染章节
        if (catalog == 0) {
@@ -307,7 +308,6 @@
          ).querySelector(`[page="${page}"]`);
          if (pageDom) {
            pageDom.scrollIntoView();
            if (callback) callback();
          } else {
            console.log("页码错误！");
          }
@@ -604,6 +604,36 @@
                });
              }
            }
            // 处理高亮
            if (this.highlightData) {
              // 高亮行
              setTimeout(() => {
                // 获取页面所有text节点
                const pageTextList = (
                  this.container ? this.container : document
                ).createTreeWalker(target, NodeFilter.SHOW_TEXT);
                // 匹配关键字
                const allPageTextNodes = [];
                let currentNode = pageTextList.nextNode();
                while (currentNode) {
                  allPageTextNodes.push(currentNode);
                  currentNode = pageTextList.nextNode();
                }
                for (let i = 0; i < allPageTextNodes.length; i++) {
                  const textDom = allPageTextNodes[i];
                  let txtIndex = textDom.textContent.indexOf(this.highlightData.txt);
                  if (txtIndex > -1) {
                    textDom.parentNode.style.transition =
                      "background-color 0.8s";
                    textDom.parentNode.scrollIntoView();
                    textDom.parentNode.style.backgroundColor = "#79bbf0";
                    setTimeout(() => {
                      textDom.parentNode.style.backgroundColor = "";
                    }, 1000);
                  }
                }
              }, 100);
            }
            if (this.loadPageList.length > 5) {
              // 超过5页
              this.loadPageList.shift();
@@ -615,7 +645,7 @@
    initSwiper() {
      const doms = (
        this.container ? this.container : document
      ).querySelectorAll(".swiper-container");
      ).querySelectorAll(".swiper-img");
      for (let i = 0; i < doms.length; i++) {
        const dom = doms[i];
        new Swiper(dom, {
@@ -779,38 +809,10 @@
    },
    // 根据检索结果跳转对应位置并高亮
    searchItemLocation(data) {
      // 记录高亮信息
      this.highlightData = data;
      // 跳转
      this.gotoPage(data.catalog, data.page, () => {
        // 高亮行
        const thisPageDom = (
          this.container ? this.container : document
        ).querySelector(`[page="${data.page}"]`);
        if (thisPageDom) {
          // 获取页面所有text节点
          const pageTextList = (
            this.container ? this.container : document
          ).createTreeWalker(thisPageDom, NodeFilter.SHOW_TEXT);
          // 匹配关键字
          const allPageTextNodes = [];
          let currentNode = pageTextList.nextNode();
          while (currentNode) {
            allPageTextNodes.push(currentNode);
            currentNode = pageTextList.nextNode();
          }
          for (let i = 0; i < allPageTextNodes.length; i++) {
            const textDom = allPageTextNodes[i];
            let txtIndex = textDom.textContent.indexOf(data.txt);
            if (txtIndex > -1) {
              textDom.parentNode.style.transition = "background-color 0.8s";
              textDom.parentNode.scrollIntoView();
              textDom.parentNode.backgroundColor = "#79bbf0";
              setTimeout(() => {
                textDom.parentNode.backgroundColor = "";
              }, 2000);
            }
          }
        }
      });
      this.gotoPage(data.catalog, data.page, () => {});
    }
  },
  components: {