考试历史添加分页

src/views/home/person/exam-history.vue

@@ -1,31 +1,19 @@
 <template>
   <div class="exam-history-box">
     <van-nav-bar v-if="env!=='pro'" title="考试" left-arrow @click-left="onClickLeft" />
-    <div class="exam-history-div">
+    <div class="exam-history-div" @scroll="scrollExamBox($event)">
       <div class="exam-history-grades-div">
         <div class="exam-history-name-description">考试积分</div>
-        <div class="exam-history-grades">
-          {{ userExamPonits }}
-        </div>
-        <div class="exam-history-description" @click="clickExamRule">
-          积分说明
-        </div>
+        <div class="exam-history-grades">{{ userExamPonits }}</div>
+        <div class="exam-history-description" @click="clickExamRule">积分说明</div>
         <div class="exam-history-class-box">
-          <div class="exam-history-class-item">
-            专项考试积分：{{ specialExamPoints }}
-          </div>
-          <div class="exam-history-class-item">
-            普通考试积分：{{ generalExamPoints }}
-          </div>
+          <div class="exam-history-class-item">专项考试积分：{{ specialExamPoints }}</div>
+          <div class="exam-history-class-item">普通考试积分：{{ generalExamPoints }}</div>
         </div>
       </div>
 
       <div class="exam-history-list">
-        <div
-          v-for="(item, index) in examHistoryList"
-          :key="index"
-          class="exam-history-item"
-        >
+        <div v-for="(item, index) in examHistoryList" :key="index" class="exam-history-item">
           <div class="exam-history-item-left">
             <div class="exam-history-item-left-title">{{ item.examName }}</div>
             <div class="exam-history-item-left-percentage">
@@ -37,9 +25,9 @@
                   :show-pivot="false"
                 />
               </div>
-              <div class="exam-history-item-left-schedule-text">
-                {{ item.points || 0 }} 分 / 满分 {{ item.totalPoints }} 分
-              </div>
+              <div
+                class="exam-history-item-left-schedule-text"
+              >{{ item.points || 0 }} 分 / 满分 {{ item.totalPoints }} 分</div>
             </div>
           </div>
           <div class="exam-history-item-right">
@@ -68,7 +56,10 @@ export default {
         THREE: 3
       }, // 类型
       examHistoryList: [],
-      env: "pro"
+      env: "pro",
+      finished: false, // 是否已加载完毕
+      pageIndex: 0,
+      pageSize: 10
     };
   },
   mounted() {
@@ -131,21 +122,42 @@ export default {
     onClickLeft() {
       this.$router.back();
     },
+    scrollExamBox(e) {
+      if (
+        !this.finished &&
+        e.srcElement.scrollTop + e.srcElement.offsetHeight >
+          e.srcElement.scrollHeight - 100
+      ) {
+        console.log("触底");
+        this.pageIndex = this.pageIndex + 1;
+        this.getExamHistory();
+      }
+    },
     // 查询：考试记录
     getExamHistory() {
+      this.finished = true;
       this.$store.commit("toggleLoading", true);
       let params = {
-        user: this.user.userInfo.userName
+        user: this.user.userInfo.userName,
+        page: this.pageIndex,
+        size: this.pageSize
       };
       this.$_http
         .get(this.$_API.JTXT_GET_USER_EXAMS_HISTORY, { params })
         .then(res => {
+          // 分页查询
           res.data.content.forEach((item, index) => {
             this.getExamDetailFun(item, index, index + 1 === res.data.length);
           });
-          this.finished = true;
+          // 分页到底了
+          if (res.data.last) {
+            this.finished = true;
+          } else {
+            this.finished = false;
+          }
         })
         .catch(() => {
+          this.finished = true;
           this.$store.commit("toggleLoading", false);
         });
     },
@@ -178,12 +190,13 @@ export default {
 <style lang="scss" scoped>
 .exam-history-box {
   width: 100%;
-  height: 100vh;
+  height: 100%;
   font-size: 0.6rem;
   background-color: #fff;
   .exam-history-div {
+    height: 100vh;
     width: 100%;
-    overflow-y: auto;
+    overflow-y: scroll;
     padding: 0 1rem;
     .exam-history-grades-div {
       display: flex;
@@ -225,6 +238,7 @@ export default {
     }
     .exam-history-list {
       padding: 0.5rem 0;
+      height: auto;
       .exam-history-item {
         padding: 0.5rem 0;
         border-top: 1px solid #e5e5e5;