修改上拉加载逻辑

src/api/modules/exam.js

@@ -13,6 +13,10 @@ export default {
     // 查询某道题的答案
     // GET_JTXT_GET_EXAMS_ONE_QUESTIONS_ANSWER: "",
     // 结束考试
-    POST_JTXT_GET_EXAMS_END: "/exams/{examId}/end"
+    POST_JTXT_GET_EXAMS_END: "/exams/{examId}/end",
+    // 查询每周答题列表
+    GET_JTXT_WEEKLY_QUESTIONS: "/weekly-questions",
+    // 查询专项答题
+    GET_JTXT_SPECIAL_QUESTIONS: "/special-questions"
   }
 };

src/views/home/answer/page-answer-special.vue

@@ -40,18 +40,18 @@ export default {
   components: {},
   data() {
     return {
-      specialAnswerList: [
-        { title: "答题1", addedTime: "2021-06-01" },
-        { title: "答题2", addedTime: "2021-06-07" },
-        { title: "答题3", addedTime: "2021-06-14" },
-        { title: "答题4", addedTime: "2021-06-21" }],
+      specialAnswerList: [],
       loading: false,
-      finished: false
+      finished: false,
+      specialPage: 0,
+      specialSize: 10
     };
   },
   created() {
     this.getSpecialAnswerList();
   },
+  destroyed () {
+  },
   activated() {
   },
   computed: {
@@ -60,11 +60,39 @@ export default {
     getSpecialAnswerList() {
       this.loading = true;
       this.specialAnswerList = [
+        { title: "答题1", addedTime: "2021-06-01" },
+        { title: "答题2", addedTime: "2021-06-07" },
+        { title: "答题3", addedTime: "2021-06-14" },
+        { title: "答题1", addedTime: "2021-06-01" },
+        { title: "答题2", addedTime: "2021-06-07" },
+        { title: "答题3", addedTime: "2021-06-14" },
+        { title: "答题1", addedTime: "2021-06-01" },
+        { title: "答题2", addedTime: "2021-06-07" },
+        { title: "答题3", addedTime: "2021-06-14" },
+        { title: "答题1", addedTime: "2021-06-01" },
+        { title: "答题2", addedTime: "2021-06-07" },
+        { title: "答题3", addedTime: "2021-06-14" },
         { title: "答题1", addedTime: "2021-06-01" },
         { title: "答题2", addedTime: "2021-06-07" },
         { title: "答题3", addedTime: "2021-06-14" },
         { title: "答题4", addedTime: "2021-06-21" }];
       this.loading = false;
+      let params = {
+        page: this.specialPage,
+        size: this.specialSize
+      };
+      this.$_http
+        .get(this.$_API.GET_JTXT_SPECIAL_QUESTIONS, { params })
+        .then(res => {
+          console.log("special----" + JSON.stringify(res));
+          // 不能上拉了就是加载玩了
+          this.finished = res.data.last;
+          this.specialPage++;
+          this.loading = false;
+        })
+        .catch(() => {
+          this.$store.commit("toggleLoading", false);
+        });
     },
     clickAnswer() {
       this.$store.commit("updateAnswerItemStore", {
@@ -73,7 +101,9 @@ export default {
       });
       this.$router.push({ name: "answerRecruit" });
     },
-    onLoad() {}
+    onLoad() {
+      this.getSpecialAnswerList();
+    }
   }
 };
 </script>

src/views/home/answer/page-answer-week.vue

@@ -4,7 +4,7 @@
       v-model="loading"
       :finished="finished"
       finished-text="没有更多了"
-      @load="onLoad()"
+      @load="onLoad"
     >
       <van-cell
         v-for="(item, index) in weekAnswerList"
@@ -41,25 +41,56 @@ export default {
     return {
       weekAnswerList: [],
       loading: false,
-      finished: false
+      finished: false,
+      weeklyPage: 0,
+      weeklySize: 10
     };
   },
   created() {
     this.getWeekAnswerList();
   },
+  destroyed () {
+  },
   activated() {
   },
   computed: {
   },
   methods: {
     getWeekAnswerList() {
-      this.loading = true;
       this.weekAnswerList = [
+        { title: "答题1", addedTime: "2021-06-01" },
+        { title: "答题2", addedTime: "2021-06-07" },
+        { title: "答题3", addedTime: "2021-06-14" },
+        { title: "答题1", addedTime: "2021-06-01" },
+        { title: "答题2", addedTime: "2021-06-07" },
+        { title: "答题3", addedTime: "2021-06-14" },
+        { title: "答题1", addedTime: "2021-06-01" },
+        { title: "答题2", addedTime: "2021-06-07" },
+        { title: "答题3", addedTime: "2021-06-14" },
+        { title: "答题1", addedTime: "2021-06-01" },
+        { title: "答题2", addedTime: "2021-06-07" },
+        { title: "答题3", addedTime: "2021-06-14" },
         { title: "答题1", addedTime: "2021-06-01" },
         { title: "答题2", addedTime: "2021-06-07" },
         { title: "答题3", addedTime: "2021-06-14" },
         { title: "答题4", addedTime: "2021-06-21" }];
-      this.loading = false;
+      this.loading = true;
+      let params = {
+        page: this.weeklyPage,
+        size: this.weeklySize
+      };
+      this.$_http
+        .get(this.$_API.GET_JTXT_WEEKLY_QUESTIONS, { params })
+        .then(res => {
+          console.log("weekly----" + JSON.stringify(res));
+          // 不能上拉了就是加载玩了
+          this.finished = res.data.last;
+          this.weeklyPage++;
+          this.loading = false;
+        })
+        .catch(() => {
+          this.$store.commit("toggleLoading", false);
+        });
     },
     clickAnswer(item) {
       this.$store.commit("updateAnswerItemStore", {
@@ -67,9 +98,12 @@ export default {
         value: "weekly-questions"
       });
       this.$router.push({ name: "answerRecruit" });
+    },
+    onLoad() {
+      this.getWeekAnswerList();
     }
-  },
-  onLoad() {}
+  }
+
 };
 </script>
 

src/views/home/exam/page-exam.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="page-exam-box" @scroll="scrollExamBox($event)" ref="exam-box">
-    <div class="exam-list" v-if="examList.length > 0">
+  <div class="page-exam-box">
+    <div class="exam-list" v-if="examList.length > 0"  id="examBox" @scroll="scrollExamBox($event)">
       <div
         class="exam-item"
         v-for="(item, index) in examList"
@@ -83,12 +83,20 @@ export default {
   },
   created() {
     this.getExamListFun(); // 查询：考试的场次列表信息
-    window.addEventListener("scroll", this.handleExamScroll, true);
+  },
+  mounted() {
   },
   destroyed () {
-    window.removeEventListener("scroll", this.handleExamScroll);
   },
   methods: {
+    scrollExamBox(e) {
+      if (this.canExamFlag && e.srcElement.scrollTop + e.srcElement.offsetHeight > e.srcElement.scrollHeight - 100) {
+        this.canExamFlag = false;
+        console.log("触底");
+        this.examPage = this.examPage + 1;
+        this.getExamListFun();
+      }
+    },
     // 查询：考试场次的列表信息
     getExamListFun() {
       this.isInited = false;
@@ -114,13 +122,11 @@ export default {
             // 分页到底了
             if (res.data.last) {
               this.canExamFlag = false;
-              Toast("没有更多内容了");
             } else {
               this.canExamFlag = true;
             }
             this.$nextTick(() => {
               this.examList = [...this.examList, ...res.data.content];
-            //   console.log("----" + JSON.stringify(this.examList));
             });
             this.isInited = true;
           }
@@ -133,22 +139,6 @@ export default {
         });
     },
 
-    async handleExamScroll() {
-      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
-      var windowHeight =
-        document.documentElement.clientHeight || document.body.clientHeight;
-      var scrollHeight =
-        document.documentElement.scrollHeight || document.body.scrollHeight;
-      //   console.log("---scrollTop-----" + scrollTop);
-      //   console.log("---windowHeight-----" + windowHeight);
-      //   console.log("---scrollHeight-----" + scrollHeight);
-      if (this.canExamFlag && scrollTop + windowHeight >= scrollHeight - 100) {
-        this.canExamFlag = false;
-        console.log("触底");
-        this.examPage = this.examPage + 1;
-        await this.getExamListFun();
-      }
-    },
     formateTimeDiffFun(secondes) {
       let hours = Math.floor(secondes / (1000 * 60 * 60));
       let minutes = Math.floor(
@@ -241,10 +231,12 @@ export default {
 .page-exam-box {
   width: 100%;
   height: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
+//   overflow-y: auto;
+//   overflow-x: hidden;
   font-size: 0.6rem;
   .exam-list {
+    height: 100vh;
+    overflow-y: scroll;
     padding: 0.5rem 0.5rem;
     .exam-item {
       width: 100%;

src/views/home/learn/page-learn-child.vue

@@ -81,8 +81,7 @@ export default {
       finished: false,
       learnChildList: [],
       learnPage: 0,
-      learnSize: 10,
-      canLearnFlag: true // 加载考试标志
+      learnSize: 10
     };
   },
   computed: {
@@ -93,11 +92,8 @@ export default {
   created() {},
   mounted() {
     this.getChildList();
-    window.addEventListener("scroll", this.handleLearnScroll, true);
-  },
-  destroyed () {
-    window.removeEventListener("scroll", this.handleLearnScroll);
   },
+  destroyed () {},
   watch: {
     // 监听：工种
     chooseEngneeringWork(value) {
@@ -120,15 +116,12 @@ export default {
           this.learnChildList = res.data;
           this.$store.commit("toggleLoading", false);
           this.learnPage = 0;
-          this.getContentList();
         })
         .catch(() => {
           this.$store.commit("toggleLoading", false);
         });
     },
     childChange(index) {
-      this.canLearnFlag = true;
-      this.finished = !this.canLearnFlag;
       this.choosedChildIndex = index;
       this.learnPage = 0;
       this.getContentList();
@@ -154,39 +147,16 @@ export default {
         )
         .then(res => {
           this.formatNeedStudyTodayFun(res.data.content);
-
           // 分页到底了
-          if (res.data.last) {
-            this.canLearnFlag = false;
-          } else {
-            this.canLearnFlag = true;
-          }
-          // 不能上拉了就是加载玩了
-          this.finished = !this.canLearnFlag;
+          this.finished = res.data.last;
+          this.learnPage++;
           this.$store.commit("toggleLoading", false);
         })
         .catch(() => {
-          this.canLearnFlag = false;
           Toast("系统异常");
           this.$store.commit("toggleLoading", false);
         });
     },
-    async handleLearnScroll() {
-      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
-      var windowHeight =
-        document.documentElement.clientHeight || document.body.clientHeight;
-      var scrollHeight =
-        document.documentElement.scrollHeight || document.body.scrollHeight;
-      //   console.log("---scrollTop-----" + scrollTop);
-      //   console.log("---windowHeight-----" + windowHeight);
-      //   console.log("---scrollHeight-----" + scrollHeight);
-      if (this.canLearnFlag && scrollTop + windowHeight >= scrollHeight - 100) {
-        this.canLearnFlag = false;
-        console.log("触底");
-        this.learnPage = this.learnPage + 1;
-        await this.getContentList();
-      }
-    },
     // 判断是否今日必学
     formatNeedStudyTodayFun(datas) {
       let todayStr = getTodayStr();
@@ -199,7 +169,7 @@ export default {
       });
       this.contentList = datas;
     },
-    onLoad() {},
+    onLoad() { this.getContentList(); },
     chooseContent(index) {
       this.$router.push({
         name: "learn-content",

src/views/home/learn/page-learn-content.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="page-learn-content-box">
+  <div class="page-learn-content-box" @scroll="handleCommentScroll($event)">
     <!-- <van-nav-bar title="学习" left-arrow @click-left="onClickLeft" /> -->
     <div v-if="!isReadable" class="learn-content-rest-time">已学完</div>
     <div v-else class="learn-content-rest-time">
@@ -59,7 +59,7 @@
         <div class="learn-content-comment-title-icon"></div>
         <span>评论</span>
       </div>
-      <div class="learn-content-comment-list">
+      <div class="learn-content-comment-list"  >
         <div
           class="learn-content-comment-item"
           v-for="(item, index) in commentList"
@@ -135,10 +135,8 @@ export default {
   },
   created() {
     this.setLanXinNavigator();
-    window.addEventListener("scroll", this.handleCommentScroll, true);
   },
   destroyed () {
-    window.removeEventListener("scroll", this.handleCommentScroll);
   },
   activated() {
     this.setLanXinNavigator();
@@ -210,16 +208,9 @@ export default {
           this.$store.commit("toggleLoading", false);
         });
     },
-    async handleCommentScroll() {
-      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
-      var windowHeight =
-        document.documentElement.clientHeight || document.body.clientHeight;
-      var scrollHeight =
-        document.documentElement.scrollHeight || document.body.scrollHeight;
-      //   console.log("---scrollTop-----" + scrollTop);
-      //   console.log("---windowHeight-----" + windowHeight);
-      //   console.log("---scrollHeight-----" + scrollHeight);
-      if (this.canCommentFlag && scrollTop + windowHeight >= scrollHeight - 100) {
+    async handleCommentScroll(e) {
+      console.log("aaaaa");
+      if (this.canCommentFlag && e.srcElement.scrollTop + e.srcElement.offsetHeight > e.srcElement.scrollHeight - 100) {
         this.canCommentFlag = false;
         console.log("触底");
         this.commentPage = this.commentPage + 1;
@@ -388,6 +379,8 @@ export default {
 <style lang="scss" scoped>
 @import "~@/styles/mixin";
 .page-learn-content-box {
+  height: 100vh;
+  overflow-y: scroll;
   font-size: 0.6rem;
   padding-bottom: 2rem;
   .learn-content-rest-time {