From ff5251d928d441693c1813a9de99a882826e554e Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期一, 27 五月 2024 17:45:59 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout

---
 src/books/childHealth/view/content/index.vue |   92 +++++++++++++++++++++++++++++++++++++++-------
 1 files changed, 78 insertions(+), 14 deletions(-)

diff --git a/src/books/childHealth/view/content/index.vue b/src/books/childHealth/view/content/index.vue
index 0821c6a..6d64eb8 100644
--- a/src/books/childHealth/view/content/index.vue
+++ b/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锛岃〃绀哄綋鐩爣鍏冪礌涓�鍗婃垨鏇村鏄剧ず鍦ㄨ绐椾腑鏃惰Е鍙戝洖璋冨嚱鏁般��
     });
 
     // 鍚姩椤电爜瑙傚療
@@ -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: {

--
Gitblit v1.9.1