更新短视频页面

src/views/home/ShortVideo.vue

@@ -1,59 +1,29 @@
 <template>
   <div>
-    <!--电影列表，与推荐列表-->
     <el-row id="movie-list">
-      <el-col :md="4">
-        <el-card class="box-card" :body-style="{ paddingTop: '0px' }">
-          <div slot="header" class="clearfix">
-            <span>视频分区</span>
-          </div>
-          <div class="item">
-            <el-tree
-              :data="treeNode"
-              :props="defaultProps"
-              highlight-current
-              @node-click="handleNodeClick"
-            >
-              <span slot-scope="{ node, data }">
-                <span :class="data.icon">{{ node.label }}</span>
-              </span>
-            </el-tree>
-          </div>
-        </el-card>
-      </el-col>
-      <!--电影列表-->
-      <el-col :md="20">
-        <el-col v-for="(video, index) in dataList" :key="index" :md="6" :sm="12" :xs="12">
-          <video-card :video="video" />
-        </el-col>
-        <el-col v-if="totalSize === 0" class="not-result" :md="6" :sm="12" :xs="12">
-          <img src="@/assets/img/icon/not-result.png">
-          <div>没有视频数据</div>
-        </el-col>
-        <!--
-          分页按钮：
-          page-size：每页显示条数
-          total：总条数
-          hide-on-single-page： 页数为一时隐藏
-        -->
-        <el-col :span="24" class="pagination">
-          <el-pagination
-            :small="screenWidth <= 768"
-            layout="prev, pager, next"
-            :page-size="pageSize"
-            :current-page="currentPage"
-            :total="totalSize"
-            @current-change="handleCurrentChange"
-          />
-        </el-col>
-      </el-col>
+      <el-scrollbar style="width: 100%; height: 75vh;">
+        <el-row
+          v-if="dataList.length !== 0"
+          v-infinite-scroll="load"
+          infinite-scroll-disabled="loading"
+          infinite-scroll-distance="10"
+        >
+          <el-col v-for="(video, index) in dataList" :key="index" :md="6" :sm="12" :xs="12">
+            <video-card :video="video" />
+          </el-col>
+          <el-col v-if="dataList.length === 0" class="not-result" :md="6" :sm="12" :xs="12">
+            <img src="@/assets/img/icon/not-result.png">
+            <div>没有视频数据</div>
+          </el-col>
+        </el-row>
+      </el-scrollbar>
     </el-row>
   </div>
 </template>
 
 <script>
 import VideoCard from 'components/card/VideoCard'
-import { categoryShortVideos, videoCategories } from '@/api/video'
+import { categoryShortVideos } from '@/api/video'
 
 export default {
   name: 'ShortVideo',
@@ -72,31 +42,12 @@ export default {
         children: 'children',
         label: 'label',
         value: 'value'
-      }
+      },
+      loading: false
     }
   },
   created() {
     document.title = '短视频主页'
-
-    videoCategories().then(resp => {
-      if (resp.code === 0) {
-        this.treeNode = resp.data
-      } else {
-        this.$notify({
-          title: '提示',
-          message: resp.msg,
-          type: 'error',
-          duration: 3000
-        })
-      }
-    }).catch(error => {
-      this.$notify({
-        title: '提示',
-        message: error.message,
-        type: 'warning',
-        duration: 3000
-      })
-    })
     this.videoPageWrapper(this.categoryId, this.currentPage)
   },
   mounted() {
@@ -109,25 +60,15 @@ export default {
     }
   },
   methods: {
-    handleNodeClick(data) {
-      this.currentPage = 1
-      this.dataList = []
-
-      this.categoryId = data.value
-      this.videoPageWrapper(this.categoryId, this.currentPage)
-    },
-    handleCurrentChange(currentPage) {
-      this.currentPage = currentPage
-      this.videoPageWrapper(this.categoryId, this.currentPage)
-      // 回到顶部
-      scrollTo(0, 0)
-    },
     videoPageWrapper(categoryId, currentPage) {
       categoryShortVideos(categoryId, currentPage).then(resp => {
         if (resp.code === 0) {
-          const respData = resp.data
-          this.dataList = respData.list
-          this.totalSize = respData.totalSize
+          for (const item of resp.data.list) {
+            this.dataList.push(item)
+          }
+
+          this.currentPage += 1
+          this.loading = false
         } else {
           this.$notify({
             title: '提示',
@@ -144,6 +85,12 @@ export default {
           duration: 3000
         })
       })
+    },
+    load() {
+      this.loading = true
+      setTimeout(() => {
+        this.videoPageWrapper(this.categoryId, this.currentPage)
+      }, 1000)
     }
   }
 }
@@ -157,13 +104,6 @@ export default {
     padding-left: 0.5%;
     padding-right: 0.5%;
   }
-
-  .category-btn {
-    padding-left: 0.5%;
-    padding-right: 0.5%;
-    padding-top: 3%;
-    text-align: center;
-  }
 }
 
 #movie-list {
@@ -177,9 +117,4 @@ export default {
   padding-bottom: 100px;
   text-align: center;
 }
-
-.pagination {
-  text-align: center;
-  padding: 10px;
-}
 </style>