使用 v-infinite-scroll 实现首页滚动加载

.env.development

@@ -2,5 +2,6 @@
 ENV = 'development'
 
 # base api
-VUE_APP_BASE_API = 'http://localhost:8000'
+#VUE_APP_BASE_API = 'http://localhost:8000'
+VUE_APP_BASE_API = 'http://api.reghao.cn'
 FILE_SERVER = 'http://localhost:8002'

package-lock.json

@@ -11520,6 +11520,11 @@
       "integrity": "sha1-UylVzB6yCKPZkLOp+acFdGV+CPI=",
       "dev": true
     },
+    "vue-infinite-scroll": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npm.taobao.org/vue-infinite-scroll/download/vue-infinite-scroll-2.0.2.tgz",
+      "integrity": "sha1-yjepH+ku4K07dKz4aCwAkXFEtxE="
+    },
     "vue-loader": {
       "version": "15.9.3",
       "resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-15.9.3.tgz?cache=0&sync_timestamp=1600850410121&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-15.9.3.tgz",

package.json

@@ -26,6 +26,7 @@
     "vue": "^2.6.12",
     "vue-cookies": "^1.7.4",
     "vue-filepond": "^6.0.3",
+    "vue-infinite-scroll": "^2.0.2",
     "vue-router": "^3.4.5",
     "vuetify": "^2.3.12",
     "vuex": "^3.4.0",

src/main.js

@@ -4,8 +4,10 @@ import router from './router'
 import store from './store'
 import vuetify from './plugins/vuetify'
 import VueCookies from 'vue-cookies'
+import infiniteScroll from 'vue-infinite-scroll'
 
 Vue.use(VueCookies)
+Vue.use(infiniteScroll)
 
 Vue.config.productionTip = false
 

src/views/home/index.vue

@@ -1,13 +1,15 @@
 <template>
   <v-container fill-height fluid style="padding-left: 24px; padding-right: 24px">
-    <v-row no-gutters>
-      <v-col
-        v-for="item in videoList"
-        :key="item.id"
-      >
-        <VideoCared :video="item" />
-      </v-col>
-    </v-row>
+    <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" 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>
 
@@ -22,26 +24,31 @@ export default {
   },
   data() {
     return {
-      videoList: []
+      videoList: [],
+      busy: false,
+      page: 1
     }
   },
-  mounted() {
-    // 监听页面是否滚动到底部
-    window.addEventListener('scroll', this.lazyLoading, true)
-  },
   created() {
-    this.getRecommendVideo()
-  },
-  destroyed() {
-    // 页面离开后销毁，防止切换路由后上一个页面监听scroll滚动事件会在新页面报错问题
-    window.removeEventListener('scroll', this.lazyLoading)
+    this.getRecommendVideo(this.page)
   },
   methods: {
-    getRecommendVideo() {
-      videoRecommend()
+    loadMore: function() {
+      this.busy = true
+      setTimeout(() => {
+        this.getRecommendVideo(this.page)
+      }, 1000)
+    },
+    getRecommendVideo(page) {
+      videoRecommend(page)
         .then(res => {
           if (res.code === 0) {
-            this.videoList = res.data.list
+            // this.videoList = []
+            for (const item of res.data.list) {
+              this.videoList.push(item)
+            }
+            this.page += 1
+            this.busy = false
           } else {
             this.$notify({
               title: res.code,
@@ -54,20 +61,6 @@ export default {
         .catch(error => {
           this.$message.error(error.message)
         })
-    },
-    // 滚动操作
-    lazyLoading() {
-      // 滚动到底部，再加载的处理事件
-      // 获取 可视区高度`、`滚动高度`、`页面高度`
-      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
-      const clientHeight = document.documentElement.clientHeight
-      const scrollHeight = document.documentElement.scrollHeight
-      // 页面滚动到底部，逻辑代码
-      if (scrollTop + clientHeight >= scrollHeight) {
-        // TODO 页面滚动到底部时请求数据并渲染当前页面
-        console.log('滚动到底部，触发')
-        this.getRecommendVideo()
-      }
     }
   }
 }