基于Vue3實現(xiàn)無限滾動組件的示例代碼

更新時間：2022年09月20日 11:50:03 作者：大前端私房菜

如果你在社交媒體上停留的時間過長，那么，你所在的網(wǎng)站很可能正在使用無限滾動組件。這篇文章教你利用Vue3實現(xiàn)無限滾動組件，感興趣的可以參考一下

為什么還要使用無限滾動組件

我們都見過使用無限滾動來顯示其內(nèi)容的網(wǎng)站的示例，但是什么時候使用它，它的效果會比使用典型的分頁系統(tǒng)更好呢？

你可以閱讀我之前分享的一篇文章《無限滾動與分頁哪個用戶體驗更好？如何正確使用它們》，在這里，我只簡單的總結(jié)一下它們的有缺點。

無限滾動的優(yōu)點

用戶參與和內(nèi)容發(fā)現(xiàn)
滾動比點擊更好（更好的可用性）
滾動適用于移動設(shè)備

無限滾動的缺點

頁面性能和設(shè)備資源
項目搜索和位置 - 用戶無法為頁面添加書簽并保留位置
不相關(guān)的滾動條

就像所有與 Web 開發(fā)有關(guān)的事情一樣，選擇任何一個選項都有正當?shù)睦碛?。請?wù)必考慮哪個最適合你的項目！

無論如何，學習如何構(gòu)建一個 Vue3 無限滾動組件是非常有趣的，并且可能對你有用。

首先，讓我們從高層次上回顧一下這個系統(tǒng)是如何工作的。

主要分為三個部分

生成內(nèi)容的模擬 API 調(diào)用
呈現(xiàn)單個內(nèi)容的 PostComponent
ListComponent 包含所有內(nèi)容組件并處理從 API 加載內(nèi)容

1.模擬 API 調(diào)用

在教程中，我們將編寫一個返回硬編碼數(shù)據(jù)的虛擬 API 調(diào)用。如果你在真實的后端和數(shù)據(jù)庫中實現(xiàn)這一點，重要的方面，你可以根據(jù)數(shù)據(jù)庫中的大小和位置決定以某種方式限制你的結(jié)果。

這個 API 調(diào)用可以是任何東西，從簡單應(yīng)用程序中的簡單數(shù)據(jù)庫查詢一直到更高級應(yīng)用程序中的復(fù)雜推薦算法。

以下是社交媒體網(wǎng)站常用的內(nèi)容加載算法的一些不同想法：

發(fā)布日期
與當前用戶的相關(guān)性
帖子上的活動

然而，為簡單起見，我們的算法只會生成隨機的帖子數(shù)據(jù)，并根據(jù)給定的參數(shù)返回 X 個帖子。

var names = ['Matt Maribojoc', 'Lebron James', 'Bill Gates', 'Childish Gambino'] // used to generate posts for this tutorial
const getPosts = (number) => {
 // generate a number of posts
 // in a real setting, this would be a database call or algorithm
 let ret = []
 for (var i = 0; i < number; i++) {
   ret.push({
     author: names[i % names.length],
     content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.'
   })
 }  
 return ret
}
export default getPosts

2.制作我們的內(nèi)容組件

現(xiàn)在我們有了生成內(nèi)容的方法，讓我們創(chuàng)建一個允許我們渲染它們的組件。

這段代碼沒有什么花哨的，我們只需要通過組件的 props 接收一個帖子，然后渲染作者和內(nèi)容。這里也有一些風格可以讓事情變得更漂亮。

<template>
 <div class='post'>
   <h2> {{ post.author }} </h2>
   <p> {{ post.content }} </p>
 </div>
</template>
<script>
export default {
 props: {
   post: Object
 }
}
</script>
<style scoped>
 .post {
   background: #fff;
   padding: 1.5em;
 }
 .post:not(:last-child) {
   border-bottom: 1px solid #ddd;
 }
 .post h2 {
   font-size: 1.3em;
   padding-bottom: 0.25rem;
 }
 .post p {
   color: #888;
 }
</style>

3.顯示我們的內(nèi)容

接下來，讓我們實際弄清楚如何在屏幕上顯示一些帖子。這就是 ListComponent.vue 組件派上用場的地方。

如果你沒有任何 Vue3 經(jīng)驗，這段代碼對你來說可能有點奇怪。但是請查看本 Vue3 入門指南。

簡而言之，Vue3 將 Options API 替換為 Composition API，這意味著代碼（生命周期掛鉤、數(shù)據(jù)等）都組織在一個設(shè)置方法中。

所以首先，我們要導入一些東西：

我們的 API 調(diào)用
我們的 PostComponent
用于創(chuàng)建反應(yīng)數(shù)據(jù)的參考

onMounted 和 onUnmounted 訪問這些生命周期 hooks。

import PostComponent from './PostComponent.vue'
import { ref, onMounted, onUnmounted } from 'vue'
import getPosts from '../scripts/post-loader'

接下來，在我們的 setup 方法中，我們想要設(shè)置一個響應(yīng)式的內(nèi)容變量來調(diào)用我們的 getPosts API 調(diào)用。不要忘記返回它，以便我們的模板可以訪問它！

setup () {
   const posts = ref(getPosts(10))
   return {
     posts,
   }
}

最后，為了在模板中顯示我們的數(shù)據(jù)，我們想要運行一個 v-for 循環(huán)來迭代我們的內(nèi)容并為每個內(nèi)容呈現(xiàn)一個 PostComponent。我們的模板應(yīng)該是這樣的（注意 .list-component 有一個 ref，我們稍后會談到）

<template>
 <div class='scrolling-component' ref='scrollComponent'>
   <post-component v-for='post in posts' :post="post" />
 </div>
</template>
<script>

我們當前的頁面應(yīng)該呈現(xiàn) 10 個內(nèi)容，但是如果我們滾動到底部，什么都不會發(fā)生。

那么，現(xiàn)在讓我們繼續(xù)進行激動人心的部分：無限滾動！

4.Vue3 無限滾動

現(xiàn)在我們已經(jīng)完成了所有設(shè)置，當用戶向下滾動到內(nèi)容底部時，我們可以開始加載更多數(shù)據(jù)。

讓我們從創(chuàng)建一個方法開始，它一次加載 10 個內(nèi)容并將它們附加到我們的帖子變量中。

setup () {
   // ...
   const loadMorePosts = () => {
     let newPosts = getPosts(10)
     console.log(newPosts)
     posts.value.push(...newPosts)
   }
 // ...
}

現(xiàn)在，我們只需要一種方法來觸發(fā)這個方法。我們將通過添加一個監(jiān)聽滾動事件并調(diào)用方法的事件監(jiān)聽器來做到這一點。我們將在組件安裝時添加它，并在組件卸載（銷毀）時刪除它。

setup () {
    // ...  
   onMounted(() => {
     window.addEventListener("scroll", handleScroll)
   })
   onUnmounted(() => {
     window.removeEventListener("scroll", handleScroll)
   })
const handleScroll = (e) => {
   }
               // ...
}

非常棒！現(xiàn)在，我們需要準備好開始加載更多內(nèi)容了。如果你還記得前面的教程內(nèi)容的話，其實，我們只需要向 .list-component 元素添加了一個 refs 屬性。如果你之前在 Vue 中使用過 refs，這是一個熟悉的概念，但我們在 Vue3 中設(shè)置它們的方式有點不同。

我們將再次使用 refs 方法來實例化我們的 ref，然后，從我們的 setup 方法中返回它。

setup () {
   const posts = ref(getPosts(10))
   const scrollComponent = ref(null)
return {
     posts,
     scrollComponent
   }
}

通過使用 refs 訪問我們的元素，我們可以完成我們的方法來確定我們是否滾動到內(nèi)容的底部。

以下代碼通過檢查我們內(nèi)容的底部是否在屏幕上可見來工作。如果是，我們調(diào)用我們的方法來加載更多內(nèi)容！

const handleScroll = (e) => {
     let element = scrollComponent.value
     if ( element.getBoundingClientRect().bottom < window.innerHeight ) {
       loadMorePosts()
     }
   }

就是這樣！當我們向下滾動到當前內(nèi)容的底部時，應(yīng)該會自動加載新內(nèi)容。讓我們看看我們有什么。

無限滾動組件的可能擴展

這只是創(chuàng)建Vue3無限滾動組件的介紹。有很多不同的方向可以改進它。

如果你在真實系統(tǒng)中構(gòu)建它，我會考慮添加以下一些想法。