英文 | https://javascript.plainenglish.io/a-quick-vue3-infinite-scrolling-component-daily-vue-tips-4-20c7052ccda4
如果你在社交媒體上停留的時間過長，那麼，你所在的網站很可能正在使用無限滾動元件。
無限滾動元件是在使用者向下滾動頁面時加載新内容，而不是将其分成多個頁面。
它們對于特定類型的内容（例如使用者生成的内容）非常有效。
以下是無限滾動的示例。
在今天的教程中，我們将使用 Composition API 建立一個 Vue3 無限滾動元件。這是我們将在它結束時建構的内容的預覽。
如你所見，它是無限滾動，螢幕右側的滾動條反映了這一點。
現在，讓我們一起來看看這個元件的實作過程。
為什麼還要使用無限滾動元件？
我們都見過使用無限滾動來顯示其内容的網站的示例，但是什麼時候使用它，它的效果會比使用典型的分頁系統更好呢？
你可以閱讀我之前分享的一篇文章《無限滾動與分頁哪個使用者體驗更好？如何正确使用它們》，在這裡，我隻簡單的總結一下它們的有缺點。
無限滾動的優點：
- 使用者參與和内容發現
- 滾動比點選更好（更好的可用性）
- 滾動适用于移動裝置
無限滾動的缺點：
- 頁面性能和裝置資源
- 項目搜尋和位置 - 使用者無法為頁面添加書簽并保留位置
- 不相關的滾動條
就像所有與 Web 開發有關的事情一樣，選擇任何一個選項都有正當的理由。請務必考慮哪個最适合你的項目！
無論如何，學習如何建構一個 Vue3 無限滾動元件是非常有趣的，并且可能對你有用。
首先，讓我們從高層次上回顧一下這個系統是如何工作的。
主要分為三個部分：
- 生成内容的模拟 API 調用
- 呈現單個内容的 PostComponent
- ListComponent 包含所有内容元件并處理從 API 加載内容
1. 模拟 API 調用
在教程中，我們将編寫一個傳回寫死資料的虛拟 API 調用。如果你在真實的後端和資料庫中實作這一點，重要的方面，你可以根據資料庫中的大小和位置決定以某種方式限制你的結果。
這個 API 調用可以是任何東西，從簡單應用程式中的簡單資料庫查詢一直到更進階應用程式中的複雜推薦算法。
以下是社交媒體網站常用的内容加載算法的一些不同想法：
- 釋出日期
- 與目前使用者的相關性
- 文章上的活動
然而，為簡單起見，我們的算法隻會生成随機的文章資料，并根據給定的參數傳回 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. 制作我們的内容元件
現在我們有了生成内容的方法，讓我們建立一個允許我們渲染它們的元件。
這段代碼沒有什麼花哨的，我們隻需要通過元件的 props 接收一個文章，然後渲染作者和内容。這裡也有一些風格可以讓事情變得更漂亮。
<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. 顯示我們的内容
接下來，讓我們實際弄清楚如何在螢幕上顯示一些文章。這就是 ListComponent.vue 元件派上用場的地方。
如果你沒有任何 Vue3 經驗，這段代碼對你來說可能有點奇怪。但是請檢視本 Vue3 入門指南。
簡而言之，Vue3 将 Options API 替換為 Composition API，這意味着代碼（生命周期挂鈎、資料等）都組織在一個設定方法中。
是以首先，我們要導入一些東西：
- 我們的 API 調用
- 我們的 PostComponent
- 用于建立反應資料的參考
onMounted 和 onUnmounted 通路這些生命周期 hooks。
import PostComponent from './PostComponent.vue'
import { ref, onMounted, onUnmounted } from 'vue'
import getPosts from '../scripts/post-loader' 接下來，在我們的 setup 方法中，我們想要設定一個響應式的内容變量來調用我們的 getPosts API 調用。不要忘記傳回它，以便我們的模闆可以通路它！
setup () {
const posts = ref(getPosts(10))
return {
posts,
}
} 最後，為了在模闆中顯示我們的資料，我們想要運作一個 v-for 循環來疊代我們的内容并為每個内容呈現一個 PostComponent。我們的模闆應該是這樣的（注意 .list-component 有一個 ref，我們稍後會談到）
<template>
<div class='scrolling-component' ref='scrollComponent'>
<post-component v-for='post in posts' :post="post" />
</div>
</template>
<script> 我們目前的頁面應該呈現 10 個内容，但是如果我們滾動到底部，什麼都不會發生。
那麼，現在讓我們繼續進行激動人心的部分：無限滾動！
4. Vue3 無限滾動
現在我們已經完成了所有設定，當使用者向下滾動到内容底部時，我們可以開始加載更多資料。
讓我們從建立一個方法開始，它一次加載 10 個内容并将它們附加到我們的文章變量中。
setup () {
// ...
const loadMorePosts = () => {
let newPosts = getPosts(10)
console.log(newPosts)
posts.value.push(...newPosts)
}
// ...
} 現在，我們隻需要一種方法來觸發這個方法。我們将通過添加一個監聽滾動事件并調用方法的事件監聽器來做到這一點。我們将在元件安裝時添加它，并在元件解除安裝（銷毀）時删除它。
setup () {
// ...
onMounted(() => {
window.addEventListener("scroll", handleScroll)
})
onUnmounted(() => {
window.removeEventListener("scroll", handleScroll)
})
const handleScroll = (e) => {
}
// ...
} 非常棒！現在，我們需要準備好開始加載更多内容了。如果你還記得前面的教程内容的話，其實，我們隻需要向 .list-component 元素添加了一個 refs 屬性。如果你之前在 Vue 中使用過 refs，這是一個熟悉的概念，但我們在 Vue3 中設定它們的方式有點不同。
我們将再次使用 refs 方法來執行個體化我們的 ref，然後，從我們的 setup 方法中傳回它。
setup () {
const posts = ref(getPosts(10))
const scrollComponent = ref(null)
return {
posts,
scrollComponent
}
} 通過使用 refs 通路我們的元素，我們可以完成我們的方法來确定我們是否滾動到内容的底部。
以下代碼通過檢查我們内容的底部是否在螢幕上可見來工作。如果是，我們調用我們的方法來加載更多内容！
const handleScroll = (e) => {
let element = scrollComponent.value
if ( element.getBoundingClientRect().bottom < window.innerHeight ) {
loadMorePosts()
}
} 就是這樣！當我們向下滾動到目前内容的底部時，應該會自動加載新内容。讓我們看看我們有什麼。
無限滾動元件的可能擴充
這隻是建立Vue3無限滾動元件的介紹。有很多不同的方向可以改進它。
如果你在真實系統中建構它，我會考慮添加以下一些想法。
- 由于 API 調用将是異步的，是以建立某種加載微調器，在加載新資料時顯示
- 建立更複雜的 API 算法并将其連接配接到資料庫
- 為每個内容添加更多資料并找到顯示它的新方法
結論
我希望本教程對你熟悉 Vue3 以及建立一個非常酷的元件有所幫助。
如果你建構這個/添加任何擴充，我很想看看你做了什麼！要炫耀你的項目或有任何疑問，請在留言區給我留言。
最後，感謝你的閱讀，快樂編碼！