Index.vue 使用 el-scrollbar 并设置 height: 100vh, 实现滚动加载推荐数据

src/views/home/Index.vue

@@ -16,9 +16,7 @@
         </el-row>
       </el-col>
       <el-col :md="12">
-        <!--电影列表，与推荐列表-->
         <el-row>
-          <!--电影列表-->
           <el-col :md="24">
             <el-col v-for="(item, index) in sideDataList" :key="index" :md="12" :sm="12" :xs="12">
               <video-card :video="item" />
@@ -27,28 +25,29 @@
         </el-row>
       </el-col>
     </el-row>
-    <el-row class="movie-list">
-      <!--电影列表，与推荐列表-->
-      <el-row
-        v-if="dataList.length !== 0"
-        v-infinite-scroll="load"
-        infinite-scroll-disabled="loading"
-        infinite-scroll-distance="10"
-      >
-        <!--电影列表-->
-        <el-col :md="24">
-          <el-col v-for="(item, index) in dataList" :key="index" :md="6" :sm="12" :xs="12">
-            <video-card :video="item" />
+    <el-scrollbar style="width: 100%; height: 100vh">
+      <el-row class="movie-list">
+        <el-row
+          v-if="dataList.length !== 0"
+          v-infinite-scroll="load"
+          infinite-scroll-disabled="loading"
+          infinite-scroll-distance="10"
+        >
+          <!--电影列表-->
+          <el-col :md="24">
+            <el-col v-for="(item, index) in dataList" :key="index" :md="6" :sm="12" :xs="12">
+              <video-card :video="item" />
+            </el-col>
           </el-col>
-        </el-col>
-      </el-row>
-      <el-row v-else class="not-result">
-        <el-col :span="12" :offset="6">
-          <img src="@/assets/img/icon/not-collection.png">
-          <div>推荐数据正在计算中</div>
-        </el-col>
+        </el-row>
+        <el-row v-else class="not-result">
+          <el-col :span="12" :offset="6">
+            <img src="@/assets/img/icon/not-collection.png">
+            <div>推荐数据正在计算中</div>
+          </el-col>
+        </el-row>
       </el-row>
-    </el-row>
+    </el-scrollbar>
   </el-row>
 </template>
 
@@ -75,7 +74,7 @@ export default {
   created() {
     this.videoRecommendWrapper(this.nextId)
     this.getHotVideoWrapper()
-    // this.initServerSendEvent()
+    this.initServerSendEvent()
   },
   mounted() {
     // 当窗口宽度改变时获取屏幕宽度
@@ -90,9 +89,16 @@ export default {
     videoRecommendWrapper(nextId) {
       videoRecommend(nextId).then(resp => {
         if (resp.code === 0) {
+          this.loading = false
           const respData = resp.data
           if (respData.length === 0) {
-            this.loading = false
+            this.$notify(
+              {
+                message: '已经到底啦~~~',
+                type: 'warning',
+                duration: 3000
+              }
+            )
             return
           }
 
@@ -104,8 +110,6 @@ export default {
               this.dataList.push(item)
             }
           }
-
-          this.loading = false
           this.nextId++
         } else {
           this.$notify(
@@ -120,10 +124,10 @@ export default {
       })
     },
     load() {
-      this.max++
-      if (this.max > 0) {
+      /* this.max++
+      if (this.max > 10) {
         return
-      }
+      }*/
 
       this.loading = true
       setTimeout(() => {