tnbapp/src/views/home/index.vue

<template>
  <v-container fill-height fluid style="padding-left: 24px; padding-right: 24px">
    <div v-infinite-scroll="loadMore" infinite-scroll-disabled="true" infinite-scroll-distance="10">
      <v-row no-gutters>
        <v-col
          v-for="item in videoList"
          :key="item.id"
        >
          <VideoCared :video="item" />
        </v-col>
      </v-row>
    </div>
  </v-container>
</template>

<script>
import { videoRecommend } from '@/api/media/video'
import VideoCared from '@/components/card/video-card.vue'

export default {
  name: 'Index',
  components: {
    VideoCared
  },
  data() {
    return {
      videoList: [],
      busy: false,
      page: 1
    }
  },
  created() {
    this.getRecommendVideo(this.page)
  },
  methods: {
    loadMore: function() {
      this.busy = true
      setTimeout(() => {
        this.getRecommendVideo(this.page)
      }, 1000)
    },
    getRecommendVideo(page) {
      videoRecommend(page)
        .then(res => {
          if (res.code === 0) {
            for (const item of res.data.list) {
              this.videoList.push(item)
            }
            this.page += 1
            this.busy = false
          } else {
            console.error(res.msg)
          }
        })
        .catch(error => {
          console.error(error.message)
        })
    }
  }
}
</script>

<style>
a {
  text-decoration: none;
}
</style>