From 8cdcb6b7950710cbcf701cb5149e1b2f949e1b0f Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期三, 15 五月 2024 11:50:57 +0800
Subject: [PATCH] 题目资源
---
src/books/childHealth/view/content/index.vue | 175 +++++++++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 154 insertions(+), 21 deletions(-)
diff --git a/src/books/childHealth/view/content/index.vue b/src/books/childHealth/view/content/index.vue
index 0c06b65..6abe606 100644
--- a/src/books/childHealth/view/content/index.vue
+++ b/src/books/childHealth/view/content/index.vue
@@ -1,22 +1,28 @@
<template>
- <div class="page-content">
- <chapterOne></chapterOne>
- <chapterTwo></chapterTwo>
- <!-- <chapterThree></chapterThree> -->
- <!-- <chapterFour></chapterFour> -->
- <!-- <chapterFive></chapterFive> -->
- <!-- <chapterSix></chapterSix>
- <chapterSeven></chapterSeven>
- <chapterEight></chapterEight>
- <chapterNine></chapterNine>
- <chapterTen></chapterTen>
- <chapterEleven></chapterEleven>
- <chapterTwelve></chapterTwelve>
- <chapterThirteen></chapterThirteen> -->
+ <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>
+ <chapterThirteen
+ v-if="showCatalogList.indexOf(13) > -1"
+ ></chapterThirteen>
+ </div>
</div>
</template>
<script>
+import pageHeader from "./components/header.vue";
import chapterOne from "./components/chapter001.vue";
import chapterTwo from "./components/chapter002.vue";
import chapterThree from "./components/chapter003.vue";
@@ -30,12 +36,129 @@
import chapterEleven from "./components/chapter011.vue";
import chapterTwelve from "./components/chapter012.vue";
import chapterThirteen from "./components/chapter013.vue";
-
-
-
+import _ from "lodash";
export default {
- name: "temp-book",
+ data() {
+ return {
+ catalogLength: 13, // 鎬荤珷鑺傛暟
+ showCatalogList: [], // 鏄剧ず鐨勭珷鑺�
+ loadThreshold: 300, // 瑙﹀彂鍔犺浇闃堝��
+ throttleThreshold: 100, // 鑺傛祦闃堝��
+ previousScrollTop: 0,
+ throttledScrollHandler: null,
+ };
+ },
+ watch: {
+ showCatalogList: {
+ handler(newVal) {
+ console.log("鏄剧ず绔犺妭", newVal);
+ if (this.$store.state.qiankun.windowSelection) {
+ this.$store.state.qiankun.windowSelection({
+ showCatalogList: newVal,
+ });
+ }
+ },
+ },
+ },
+ mounted() {
+ // 榛樿鍔犺浇绔犺妭
+ this.showCatalogList = [0];
+ // 婊氬姩鐩戝惉鑺傛祦
+ this.throttledScrollHandler = _.throttle(
+ this.scrollFun,
+ this.throttleThreshold,
+ { leading: true, trailing: false }
+ );
+ // 鎻愪緵椤甸潰璺宠浆鍔熻兘
+ if (this.setGlobalState) {
+ console.log("setGlobalState");
+ this.setGlobalState({
+ gotoPage: (catalog, page) => {
+ this.gotoPage(catalog, page);
+ },
+ });
+ }
+ // 娴嬭瘯椤甸潰璺宠浆
+ // setTimeout(() => {
+ // this.gotoPage(5, 100);
+ // }, 3000);
+ },
+ methods: {
+ scrollFun(e) {
+ // 鍒ゆ柇鍚戜笂婊氬姩杩樻槸鍚戜笅婊氬姩
+ if (event.target.scrollTop > this.previousScrollTop) {
+ console.log("鍚戜笅婊氬姩");
+ const currentScrollTop =
+ event.target.scrollTop + event.target.offsetHeight;
+ if (
+ currentScrollTop >=
+ event.target.scrollHeight - this.loadThreshold
+ ) {
+ // 鍒拌揪闃堝��
+ if (
+ this.showCatalogList[this.showCatalogList.length - 1] <
+ this.catalogLength
+ ) {
+ // 鍔犺浇涓嬩竴绔�
+ this.showCatalogList.push(
+ this.showCatalogList[this.showCatalogList.length - 1] + 1
+ );
+ if (this.showCatalogList.length > 3) {
+ // 瓒呰繃涓夌珷闅愯棌椤堕儴涓�绔�
+ this.showCatalogList.shift();
+ }
+ }
+ }
+ } else if (event.target.scrollTop < this.previousScrollTop) {
+ console.log("鍚戜笂婊氬姩");
+ const currentScrollTop = event.target.scrollTop;
+ if (currentScrollTop <= this.loadThreshold) {
+ // 鍒拌揪闃堝��
+ if (this.showCatalogList[0] > 0) {
+ // 鍔犺浇涓婁竴绔�
+ this.showCatalogList.unshift(this.showCatalogList[0] - 1);
+ if (this.showCatalogList.length > 3) {
+ // 瓒呰繃涓夌珷闅愯棌搴曢儴涓�绔�
+ this.showCatalogList.pop();
+ }
+ }
+ }
+ }
+ // showCatalogList 褰撳墠鏄剧ず鐨勪笁涓珷鑺傦紝watch鐩戝惉浼犻�掔粰涓诲簲鐢�
+ console.log(this.showCatalogList);
+ // 鏇存柊涓婁竴娆℃粴鍔ㄧ殑浣嶇疆
+ this.previousScrollTop = event.target.scrollTop;
+ },
+ gotoPage(catalog, page) {
+ if (catalog >= 0 && catalog <= this.catalogLength) {
+ // 澶勭悊娓叉煋绔犺妭
+ if (catalog == 0) {
+ this.showCatalogList = [0, 1];
+ } else if (catalog == this.catalogLength) {
+ this.showCatalogList = [
+ this.catalogLength - 2,
+ this.catalogLength - 1,
+ this.catalogLength,
+ ];
+ } else {
+ this.showCatalogList = [catalog - 1, catalog, catalog + 1];
+ }
+ setTimeout(() => {
+ // 璺宠浆椤电爜
+ const pageDom = document.querySelector(`[page="${page}"]`);
+ if (pageDom) {
+ pageDom.scrollIntoView();
+ } else {
+ console.log("椤电爜閿欒锛�");
+ }
+ }, 50);
+ } else {
+ console.log("绔犺妭閿欒锛�");
+ }
+ },
+ },
components: {
+ pageHeader,
chapterOne,
chapterTwo,
chapterThree,
@@ -50,9 +173,19 @@
chapterTwelve,
chapterThirteen,
},
- methods: {
- },
};
</script>
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.page-main {
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ .page-content {
+ max-width: 816px;
+ min-width: 375px;
+ margin: 0 auto;
+ padding-bottom: 100px;
+ }
+}
+</style>
--
Gitblit v1.9.1