更新首页(推荐页面)

src/api/video.js

@@ -126,8 +126,8 @@ export function cacheBiliVideo(bvId) {
 
 /***********************************************************************************************************************/
 // 获取推荐视频
-export function videoRecommend(page) {
-  return get(videoApi.videoRecommendApi + '/' + page)
+export function videoRecommend(nextId) {
+  return get(videoApi.videoRecommendApi + '?nextId=' + nextId)
 }
 
 // 获取相似视频

src/views/home/Index.vue

@@ -1,14 +1,14 @@
 <template>
   <div>
     <!--电影列表，与推荐列表-->
-    <el-row v-if="videoList.length !== 0" id="movie-list"
+    <el-row v-if="dataList.length !== 0" id="movie-list"
             v-infinite-scroll="load"
             infinite-scroll-disabled="loading"
             infinite-scroll-distance="10">
       <!--电影列表-->
       <el-col :md="24">
-        <el-col v-for="(video, index) in videoList" :key="index" :md="6" :sm="12" :xs="12">
-          <video-card :video="video" />
+        <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-row>
@@ -32,13 +32,14 @@ export default {
     return {
       // 屏幕宽度, 为了控制分页条的大小
       screenWidth: document.body.clientWidth,
-      currentPage: 1,
-      videoList: [],
-      loading: false
+      nextId: '1',
+      dataList: [],
+      loading: false,
+      max: 0,
     }
   },
   created() {
-    this.videoRecommendWrapper(this.currentPage)
+    this.videoRecommendWrapper(this.nextId)
   },
   mounted() {
     // 当窗口宽度改变时获取屏幕宽度
@@ -50,19 +51,18 @@ export default {
     }
   },
   methods: {
-    videoRecommendWrapper(pageNumber) {
-      videoRecommend(pageNumber).then(res => {
-        if (res.code === 0) {
-          const resList = res.data.list
-          if (resList.length === 0) {
+    videoRecommendWrapper(nextId) {
+      videoRecommend(nextId).then(resp => {
+        if (resp.code === 0) {
+          const respData = resp.data
+          if (respData.length === 0) {
             this.loading = false
             return
           }
 
-          for (const item of res.data.list) {
-            this.videoList.push(item)
+          for (const item of respData) {
+            this.dataList.push(item)
           }
-          this.currentPage +=1
           this.loading = false
         } else {
           this.$notify(
@@ -77,13 +77,14 @@ export default {
       })
     },
     load() {
-      if (this.currentPage > 20) {
+      this.max++
+      if (this.max > 10) {
         return
       }
 
       this.loading = true
       setTimeout(() => {
-        this.videoRecommendWrapper(this.currentPage)
+        this.videoRecommendWrapper(this.nextId)
       }, 1000)
     }
   }
@@ -91,6 +92,15 @@ export default {
 </script>
 
 <style scoped>
+/*处于手机屏幕时*/
+@media screen and (max-width: 768px){
+  #movie-list {
+    padding-top: 8px;
+    padding-left: 0.5%;
+    padding-right: 0.5%;
+  }
+}
+
 #movie-list {
   padding-top: 15px;
   padding-left: 6%;
@@ -102,13 +112,4 @@ export default {
   padding-bottom: 100px;
   text-align: center;
 }
-
-/*处于手机屏幕时*/
-@media screen and (max-width: 768px){
-  #movie-list {
-    padding-top: 8px;
-    padding-left: 0.5%;
-    padding-right: 0.5%;
-  }
-}
 </style>