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