使用 JS 监听页面 scroll 事件实现历史记录持续加载

src/views/user/History.vue

@@ -21,21 +21,24 @@
         >一键清空历史</el-button>
       </el-col>
       <el-col :md="8">
-        <el-timeline :reverse="reverse" v-infinite-scroll="load">
+        <el-timeline :reverse="reverse">
           <el-timeline-item
             v-for="(record, index) in visitList"
             :key="index"
             :timestamp="record.createAt"
+            placement="top"
           >
-            <video-card :video="record"></video-card>
-            <el-button
-              type="danger"
-              icon="el-icon-delete"
-              circle
-              size="small"
-              title="移除该历史记录"
-              @click.stop="removeHistory(record.videoId)"
-            />
+            <div>
+              <el-button
+                type="danger"
+                icon="el-icon-delete"
+                circle
+                size="small"
+                title="移除该历史记录"
+                @click.stop="removeHistory(record.videoId)"
+              />
+              <video-card :video="record"></video-card>
+            </div>
           </el-timeline-item>
         </el-timeline>
       </el-col>
@@ -46,19 +49,6 @@
         <div>你还没有看过任何东西呢</div>
       </el-col>
     </el-row>
-<!--    <el-row class="movie-list">
-      <el-col v-for="(video,index) in videos" :key="index" :md="6" :sm="8" :xs="12">
-        <video-card :video="video" date-tit="上次播放："/>
-        <el-button
-          type="danger"
-          icon="el-icon-delete"
-          circle
-          size="small"
-          title="移除该历史记录"
-          @click.stop="removeHistory(video)"
-        />
-      </el-col>
-    </el-row>-->
   </div>
 </template>
 
@@ -71,40 +61,39 @@ export default {
   components: { VideoCard },
   data() {
     return {
-      videos: [],
-      uid: 11011,
       reverse: false,
       totalSize: 0,
       nextId: 0,
-      visitList: []
+      nextId1: 0,
+      visitList: [],
     }
   },
   created() {
     document.title = '我的历史记录'
-
-    /*getVisitRecord(1).then(res => {
-      if (res.code === 0) {
-        const resData = res.data
-        this.totalSize = resData.totalSize
-        this.visitList = resData.list
-        this.nextId = resData.nextId
-      }
-    })*/
     this.getVisitRecordWrapper(this.nextId)
   },
+  mounted() {
+    window.addEventListener("scroll", this.handleScrollEvent);
+  },
   methods: {
-    load() {
-      setTimeout(() => {
-        this.getVisitRecordWrapper(this.nextId)
-      }, 1000)
+    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)
+        }
+      }
     },
     getVisitRecordWrapper(nextId) {
       getVisitRecord(nextId).then(res => {
         if (res.code === 0) {
           const resData = res.data
           this.totalSize = resData.totalSize
-          this.visitList = resData.list
           this.nextId = resData.nextId
+          for (const item of resData.list) {
+            this.visitList.push(item)
+          }
         }
       })
     },
@@ -147,10 +136,10 @@ export default {
       }).then(() => {
         console.log('删除全部记录')
 
-        const arr = []
+        /*const arr = []
         for (const i of this.videos) {
           arr.push(i.vid)
-        }
+        }*/
         // const vidStr = arr.join(',')
         // 确认
         /* deleteHistory(this.uid, vidStr).then(res => {