如果你在社交媒體上停留的時(shí)間過長，那么，你所在的網(wǎng)站很可能正在使用無限滾動(dòng)組件。
無限滾動(dòng)組件是在用戶向下滾動(dòng)頁面時(shí)加載新內(nèi)容，而不是將其分成多個(gè)頁面。
它們對于特定類型的內(nèi)容(例如用戶生成的內(nèi)容)非常有效。
以下是無限滾動(dòng)的示例。
在今天的教程中，我們將使用 Composition API 創(chuàng)建一個(gè) Vue3 無限滾動(dòng)組件。這是我們將在它結(jié)束時(shí)構(gòu)建的內(nèi)容的預(yù)覽。
如你所見，它是無限滾動(dòng)，屏幕右側(cè)的滾動(dòng)條反映了這一點(diǎn)。
現(xiàn)在，讓我們一起來看看這個(gè)組件的實(shí)現(xiàn)過程。
為什么還要使用無限滾動(dòng)組件?
我們都見過使用無限滾動(dòng)來顯示其內(nèi)容的網(wǎng)站的示例，但是什么時(shí)候使用它，它的效果會(huì)比使用典型的分頁系統(tǒng)更好呢?
你可以閱讀我之前分享的一篇文章《無限滾動(dòng)與分頁哪個(gè)用戶體驗(yàn)更好?如何正確使用它們》，在這里，我只簡單的總結(jié)一下它們的有缺點(diǎn)。
無限滾動(dòng)的優(yōu)點(diǎn)：
用戶參與和內(nèi)容發(fā)現(xiàn)
滾動(dòng)比點(diǎn)擊更好(更好的可用性)
滾動(dòng)適用于移動(dòng)設(shè)備
無限滾動(dòng)的缺點(diǎn)：
頁面性能和設(shè)備資源
項(xiàng)目搜索和位置 - 用戶無法為頁面添加書簽并保留位置
不相關(guān)的滾動(dòng)條
就像所有與 Web 開發(fā)有關(guān)的事情一樣，選擇任何一個(gè)選項(xiàng)都有正當(dāng)?shù)睦碛伞Ｕ垊?wù)必考慮哪個(gè)最適合你的項(xiàng)目!
無論如何，學(xué)習(xí)如何構(gòu)建一個(gè) Vue3 無限滾動(dòng)組件是非常有趣的，并且可能對你有用。
首先，讓我們從高層次上回顧一下這個(gè)系統(tǒng)是如何工作的。
主要分為三個(gè)部分：
生成內(nèi)容的模擬 API 調(diào)用
呈現(xiàn)單個(gè)內(nèi)容的 PostComponent
ListComponent 包含所有內(nèi)容組件并處理從 API 加載內(nèi)容
1.模擬 API 調(diào)用
在教程中，我們將編寫一個(gè)返回硬編碼數(shù)據(jù)的虛擬 API 調(diào)用。如果你在真實(shí)的后端和數(shù)據(jù)庫中實(shí)現(xiàn)這一點(diǎn)，重要的方面，你可以根據(jù)數(shù)據(jù)庫中的大小和位置決定以某種方式限制你的結(jié)果。
這個(gè) API 調(diào)用可以是任何東西，從簡單應(yīng)用程序中的簡單數(shù)據(jù)庫查詢一直到更高級應(yīng)用程序中的復(fù)雜推薦算法。
以下是社交媒體網(wǎng)站常用的內(nèi)容加載算法的一些不同想法：
發(fā)布日期
與當(dāng)前用戶的相關(guān)性
帖子上的活動(dòng)
然而，為簡單起見，我們的算法只會(huì)生成隨機(jī)的帖子數(shù)據(jù)，并根據(jù)給定的參數(shù)返回 X 個(gè)帖子。
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)建一個(gè)允許我們渲染它們的組件。
這段代碼沒有什么花哨的，我們只需要通過組件的 props 接收一個(gè)帖子，然后渲染作者和內(nèi)容。這里也有一些風(fēng)格可以讓事情變得更漂亮。
3.顯示我們的內(nèi)容
接下來，讓我們實(shí)際弄清楚如何在屏幕上顯示一些帖子。這就是 ListComponent.vue 組件派上用場的地方。
如果你沒有任何 Vue3 經(jīng)驗(yàn)，這段代碼對你來說可能有點(diǎn)奇怪。但是請查看本 Vue3 入門指南。
簡而言之，Vue3 將 Options API 替換為 Composition API，這意味著代碼(生命周期掛鉤、數(shù)據(jù)等)都組織在一個(gè)設(shè)置方法中。
所以首先，我們要導(dǎo)入一些東西：
我們的 API 調(diào)用
我們的 PostComponent
用于創(chuàng)建反應(yīng)數(shù)據(jù)的參考
onMounted 和 onUnmounted 訪問這些生命周期 hooks。
接下來，在我們的 setup 方法中，我們想要設(shè)置一個(gè)響應(yīng)式的內(nèi)容變量來調(diào)用我們的 getPosts API 調(diào)用。不要忘記返回它，以便我們的模板可以訪問它!
最后，為了在模板中顯示我們的數(shù)據(jù)，我們想要運(yùn)行一個(gè) v-for 循環(huán)來迭代我們的內(nèi)容并為每個(gè)內(nèi)容呈現(xiàn)一個(gè) PostComponent。我們的模板應(yīng)該是這樣的(注意 .list-component 有一個(gè) ref，我們稍后會(huì)談到)
我們當(dāng)前的頁面應(yīng)該呈現(xiàn) 10 個(gè)內(nèi)容，但是如果我們滾動(dòng)到底部，什么都不會(huì)發(fā)生。
那么，現(xiàn)在讓我們繼續(xù)進(jìn)行激動(dòng)人心的部分：無限滾動(dòng)!
4.Vue3 無限滾動(dòng)
現(xiàn)在我們已經(jīng)完成了所有設(shè)置，當(dāng)用戶向下滾動(dòng)到內(nèi)容底部時(shí)，我們可以開始加載更多數(shù)據(jù)。
讓我們從創(chuàng)建一個(gè)方法開始，它一次加載 10 個(gè)內(nèi)容并將它們附加到我們的帖子變量中。
現(xiàn)在，我們只需要一種方法來觸發(fā)這個(gè)方法。我們將通過添加一個(gè)監(jiān)聽滾動(dòng)事件并調(diào)用方法的事件監(jiān)聽器來做到這一點(diǎn)。我們將在組件安裝時(shí)添加它，并在組件卸載(銷毀)時(shí)刪除它。
非常棒!現(xiàn)在，我們需要準(zhǔn)備好開始加載更多內(nèi)容了。如果你還記得前面的教程內(nèi)容的話，其實(shí)，我們只需要向 .list-component 元素添加了一個(gè) refs 屬性。如果你之前在 Vue 中使用過 refs，這是一個(gè)熟悉的概念，但我們在 Vue3 中設(shè)置它們的方式有點(diǎn)不同。
我們將再次使用 refs 方法來實(shí)例化我們的 ref，然后，從我們的 setup 方法中返回它。
通過使用 refs 訪問我們的元素，我們可以完成我們的方法來確定我們是否滾動(dòng)到內(nèi)容的底部。
以下代碼通過檢查我們內(nèi)容的底部是否在屏幕上可見來工作。如果是，我們調(diào)用我們的方法來加載更多內(nèi)容!
就是這樣!當(dāng)我們向下滾動(dòng)到當(dāng)前內(nèi)容的底部時(shí)，應(yīng)該會(huì)自動(dòng)加載新內(nèi)容。讓我們看看我們有什么。
無限滾動(dòng)組件的可能擴(kuò)展
這只是創(chuàng)建Vue3無限滾動(dòng)組件的介紹。有很多不同的方向可以改進(jìn)它。
如果你在真實(shí)系統(tǒng)中構(gòu)建它，我會(huì)考慮添加以下一些想法。
由于 API 調(diào)用將是異步的，因此創(chuàng)建某種加載微調(diào)器，在加載新數(shù)據(jù)時(shí)顯示
創(chuàng)建更復(fù)雜的 API 算法并將其連接到數(shù)據(jù)庫
為每個(gè)內(nèi)容添加更多數(shù)據(jù)并找到顯示它的新方法
京公網(wǎng)安備 11010802030320號