tnbapp/src/views/home/Index.vue

<template>
  <div>
    <!--电影列表，与推荐列表-->
    <el-row v-if="videoList.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>
      </el-col>
      <!--热播列表-->
      <!--      <el-col :md="6">
        <hot-list />
      </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>
  </div>
</template>

<script>
import VideoCard from '@/components/card/VideoCard'
import Recommend from '@/components/recommend/Recommend'
import { videoRecommend } from '@/api/video'

export default {
  name: 'Index',
  components: { VideoCard, Recommend },
  data() {
    return {
      // 屏幕宽度, 为了控制分页条的大小
      screenWidth: document.body.clientWidth,
      currentPage: 1,
      videoList: [],
      loading: false
    }
  },
  created() {
    this.videoRecommendWrapper(this.currentPage)
  },
  mounted() {
    // 当窗口宽度改变时获取屏幕宽度
    window.onresize = () => {
      return () => {
        window.screenWidth = document.body.clientWidth
        this.screenWidth = window.screenWidth
      }
    }
  },
  methods: {
    videoRecommendWrapper(pageNumber) {
      videoRecommend(pageNumber).then(res => {
        if (res.code === 0) {
          const resList = res.data.list
          if (resList.length === 0) {
            this.loading = false
            return
          }

          for (const item of res.data.list) {
            this.videoList.push(item)
          }
          this.currentPage +=1
          this.loading = false
        } else {
          this.$notify(
            {
              title: '提示',
              message: '获取数据失败, 请重新刷新页面',
              type: 'warning',
              duration: 3000
            }
          )
        }
      })
    },
    load() {
      if (this.currentPage > 20) {
        return
      }

      this.loading = true
      setTimeout(() => {
        this.videoRecommendWrapper(this.currentPage)
      }, 1000)
    }
  }
}
</script>

<style scoped>
#movie-list {
  padding-top: 15px;
  padding-left: 6%;
  padding-right: 6%;
}

/*处于手机屏幕时*/
@media screen and (max-width: 768px){
  #movie-list {
    padding-top: 8px;
    padding-left: 0.5%;
    padding-right: 0.5%;
  }
}
</style>