History.vue 中的 el-timeline 采用手动点击加载更多内容

src/views/post/History.vue

@@ -21,24 +21,40 @@
         >一键清空历史</el-button>
       </el-col>
       <el-col :md="8">
-        <el-timeline :reverse="reverse">
-          <el-timeline-item
-            v-for="(record, index) in visitList"
-            :key="index"
-            :timestamp="record.createAt"
-            placement="top"
+        <div style="display: flex; justify-content: center;">
+          <el-timeline
+            :reverse="reverse"
+            style="overflow: auto"
           >
-            <history-video-card :video="record" />
-            <el-button
-              type="danger"
-              icon="el-icon-delete"
-              circle
-              size="small"
-              title="移除该历史记录"
-              @click.stop="removeHistory(record.videoId)"
-            />
-          </el-timeline-item>
-        </el-timeline>
+            <el-timeline-item
+              v-for="(record, index) in visitList"
+              :key="index"
+              :timestamp="record.createAt"
+              placement="top"
+              style="overflow: auto"
+            >
+              <history-video-card :video="record" />
+              <el-button
+                type="danger"
+                icon="el-icon-delete"
+                circle
+                size="small"
+                title="移除该历史记录"
+                @click.stop="removeHistory(record.videoId)"
+              />
+            </el-timeline-item>
+          </el-timeline>
+        </div>
+        <div style="display: flex; justify-content: center;" v-if="hasMore">
+          <el-button link type="plain" icon="el-icon-bottom" @click="loadMore">
+            加载更多
+          </el-button>
+        </div>
+        <div style="display: flex; justify-content: center;" v-else>
+          <span>
+            已经到底啦~
+          </span>
+        </div>
       </el-col>
     </el-row>
     <el-row v-else class="not-result">
@@ -64,39 +80,43 @@ export default {
       nextId: 0,
       nextId1: 0,
       visitList: [],
-      showEmpty: false
+      showEmpty: false,
+      hasMore: true
     }
   },
   created() {
     document.title = '我的历史记录'
     this.getVisitRecordWrapper(this.nextId)
   },
-  mounted() {
-    window.addEventListener('scroll', this.handleScrollEvent)
-  },
   methods: {
-    handleScrollEvent() {
-      if (document.body.scrollHeight <= window.screen.height + document.documentElement.scrollTop) {
-        console.log('滚动条触底, 加载数据')
-        if (this.nextId1 !== this.nextId) {
-          this.nextId1 = this.nextId
-          this.getVisitRecordWrapper(this.nextId)
-        }
+    loadMore() {
+      if (this.nextId1 !== this.nextId) {
+        this.nextId1 = this.nextId
+        this.getVisitRecordWrapper(this.nextId)
       }
     },
     getVisitRecordWrapper(nextId) {
       getVisitRecord(nextId).then(res => {
+        const resData = res.data
         if (res.code === 0) {
-          const resData = res.data
+          if (resData.list.length === 0) {
+            this.hasMore = false
+            return
+          }
+
           this.totalSize = resData.totalSize
-          this.nextId = resData.nextId
           for (const item of resData.list) {
             this.visitList.push(item)
           }
+
+          this.nextId = resData.nextId
+        } else {
+          this.$message.error(resData.msg)
         }
+      }).finally(() => {
       })
     },
-    // 清除当前历史记录
+    // 清除某条历史记录
     removeHistory(videoId) {
       this.$confirm('确认移除吗？', '提示', {
         confirmButtonText: '确定',
@@ -125,7 +145,7 @@ export default {
         })
       })
     },
-    // 清空所有历史记录
+    // 清除所有历史记录
     removeAll() {
       // 移除所有收藏
       this.$confirm('确认移除所有播放历史记录吗？', '提示', {