国产一区二区精品-国产一区二区精品久-国产一区二区精品久久-国产一区二区精品久久91-免费毛片播放-免费毛片基地

千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機(jī)構(gòu)

手機(jī)站
千鋒教育

千鋒學(xué)習(xí)站 | 隨時(shí)隨地免費(fèi)學(xué)

千鋒教育

掃一掃進(jìn)入千鋒手機(jī)站

領(lǐng)取全套視頻
千鋒教育

關(guān)注千鋒學(xué)習(xí)站小程序
隨時(shí)隨地免費(fèi)學(xué)習(xí)課程

當(dāng)前位置:首頁(yè)  >  技術(shù)干貨  > 一個(gè)快速的Vue3無(wú)限滾動(dòng)組件

一個(gè)快速的Vue3無(wú)限滾動(dòng)組件

來(lái)源:千鋒教育
發(fā)布人:wjy
時(shí)間: 2022-09-20 09:52:29 1663638749

  如果你在社交媒體上停留的時(shí)間過(guò)長(zhǎng),那么,你所在的網(wǎng)站很可能正在使用無(wú)限滾動(dòng)組件。

  無(wú)限滾動(dòng)組件是在用戶(hù)向下滾動(dòng)頁(yè)面時(shí)加載新內(nèi)容,而不是將其分成多個(gè)頁(yè)面。

  它們對(duì)于特定類(lèi)型的內(nèi)容(例如用戶(hù)生成的內(nèi)容)非常有效。

  以下是無(wú)限滾動(dòng)的示例。

一個(gè)快速的Vue3無(wú)限滾動(dòng)組件1

 

  在今天的教程中,我們將使用 Composition API 創(chuàng)建一個(gè) Vue3 無(wú)限滾動(dòng)組件。這是我們將在它結(jié)束時(shí)構(gòu)建的內(nèi)容的預(yù)覽。

  如你所見(jiàn),它是無(wú)限滾動(dòng),屏幕右側(cè)的滾動(dòng)條反映了這一點(diǎn)。

一個(gè)快速的Vue3無(wú)限滾動(dòng)組件2

 

  現(xiàn)在,讓我們一起來(lái)看看這個(gè)組件的實(shí)現(xiàn)過(guò)程。

  為什么還要使用無(wú)限滾動(dòng)組件?

  我們都見(jiàn)過(guò)使用無(wú)限滾動(dòng)來(lái)顯示其內(nèi)容的網(wǎng)站的示例,但是什么時(shí)候使用它,它的效果會(huì)比使用典型的分頁(yè)系統(tǒng)更好呢?

  你可以閱讀我之前分享的一篇文章《無(wú)限滾動(dòng)與分頁(yè)哪個(gè)用戶(hù)體驗(yàn)更好?如何正確使用它們》,在這里,我只簡(jiǎn)單的總結(jié)一下它們的有缺點(diǎn)。

  無(wú)限滾動(dòng)的優(yōu)點(diǎn):

  用戶(hù)參與和內(nèi)容發(fā)現(xiàn)

  滾動(dòng)比點(diǎn)擊更好(更好的可用性)

  滾動(dòng)適用于移動(dòng)設(shè)備

  無(wú)限滾動(dòng)的缺點(diǎn):

  頁(yè)面性能和設(shè)備資源

  項(xiàng)目搜索和位置 - 用戶(hù)無(wú)法為頁(yè)面添加書(shū)簽并保留位置

  不相關(guān)的滾動(dòng)條

  就像所有與 Web 開(kāi)發(fā)有關(guān)的事情一樣,選擇任何一個(gè)選項(xiàng)都有正當(dāng)?shù)睦碛伞U?qǐng)務(wù)必考慮哪個(gè)最適合你的項(xiàng)目!

  無(wú)論如何,學(xué)習(xí)如何構(gòu)建一個(gè) Vue3 無(wú)限滾動(dòng)組件是非常有趣的,并且可能對(duì)你有用。

  首先,讓我們從高層次上回顧一下這個(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)用

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

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

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

  發(fā)布日期

  與當(dāng)前用戶(hù)的相關(guān)性

  帖子上的活動(dòng)

  然而,為簡(jiǎn)單起見(jiàn),我們的算法只會(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è)允許我們渲染它們的組件。

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

一個(gè)快速的Vue3無(wú)限滾動(dòng)組件3

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

  接下來(lái),讓我們實(shí)際弄清楚如何在屏幕上顯示一些帖子。這就是 ListComponent.vue 組件派上用場(chǎng)的地方。

  如果你沒(méi)有任何 Vue3 經(jīng)驗(yàn),這段代碼對(duì)你來(lái)說(shuō)可能有點(diǎn)奇怪。但是請(qǐng)查看本 Vue3 入門(mén)指南。

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

  所以首先,我們要導(dǎo)入一些東西:

  我們的 API 調(diào)用

  我們的 PostComponent

  用于創(chuàng)建反應(yīng)數(shù)據(jù)的參考

  onMounted 和 onUnmounted 訪問(wèn)這些生命周期 hooks。

一個(gè)快速的Vue3無(wú)限滾動(dòng)組件4

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

一個(gè)快速的Vue3無(wú)限滾動(dòng)組件5

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

一個(gè)快速的Vue3無(wú)限滾動(dòng)組件6

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

  那么,現(xiàn)在讓我們繼續(xù)進(jìn)行激動(dòng)人心的部分:無(wú)限滾動(dòng)!

  4.Vue3 無(wú)限滾動(dòng)

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

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

一個(gè)快速的Vue3無(wú)限滾動(dòng)組件7

  現(xiàn)在,我們只需要一種方法來(lái)觸發(fā)這個(gè)方法。我們將通過(guò)添加一個(gè)監(jiān)聽(tīng)滾動(dòng)事件并調(diào)用方法的事件監(jiān)聽(tīng)器來(lái)做到這一點(diǎn)。我們將在組件安裝時(shí)添加它,并在組件卸載(銷(xiāo)毀)時(shí)刪除它。

一個(gè)快速的Vue3無(wú)限滾動(dòng)組件8

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

  我們將再次使用 refs 方法來(lái)實(shí)例化我們的 ref,然后,從我們的 setup 方法中返回它。

一個(gè)快速的Vue3無(wú)限滾動(dòng)組件9

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

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

一個(gè)快速的Vue3無(wú)限滾動(dòng)組件10

  就是這樣!當(dāng)我們向下滾動(dòng)到當(dāng)前內(nèi)容的底部時(shí),應(yīng)該會(huì)自動(dòng)加載新內(nèi)容。讓我們看看我們有什么。

  無(wú)限滾動(dòng)組件的可能擴(kuò)展

  這只是創(chuàng)建Vue3無(wú)限滾動(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ù)庫(kù)

  為每個(gè)內(nèi)容添加更多數(shù)據(jù)并找到顯示它的新方法

tags:
聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
10年以上業(yè)內(nèi)強(qiáng)師集結(jié),手把手帶你蛻變精英
請(qǐng)您保持通訊暢通,專(zhuān)屬學(xué)習(xí)老師24小時(shí)內(nèi)將與您1V1溝通
免費(fèi)領(lǐng)取
今日已有369人領(lǐng)取成功
劉同學(xué) 138****2860 剛剛成功領(lǐng)取
王同學(xué) 131****2015 剛剛成功領(lǐng)取
張同學(xué) 133****4652 剛剛成功領(lǐng)取
李同學(xué) 135****8607 剛剛成功領(lǐng)取
楊同學(xué) 132****5667 剛剛成功領(lǐng)取
岳同學(xué) 134****6652 剛剛成功領(lǐng)取
梁同學(xué) 157****2950 剛剛成功領(lǐng)取
劉同學(xué) 189****1015 剛剛成功領(lǐng)取
張同學(xué) 155****4678 剛剛成功領(lǐng)取
鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
董同學(xué) 138****2867 剛剛成功領(lǐng)取
周同學(xué) 136****3602 剛剛成功領(lǐng)取
相關(guān)推薦HOT
Visual Studio Online和GitHub有什么區(qū)別?

1.定位不同Visual Studio Online,現(xiàn)更名為Visual Studio Codespaces,是微軟提供的一款在線開(kāi)發(fā)環(huán)境,允許開(kāi)發(fā)者在云端進(jìn)行編程和調(diào)試工作。而...詳情>>

2023-10-15 00:21:42
什么是域控制器?

一、域控制器的定義域控制器是指在Windows Server操作系統(tǒng)中部署Active Directory服務(wù)的服務(wù)器。Active Directory是微軟公司開(kāi)發(fā)的目錄服務(wù),用...詳情>>

2023-10-15 00:10:28
深度學(xué)習(xí)模型權(quán)重h5、weights、ckpt、pth有什么區(qū)別?

1.來(lái)源框架不同h5格式通常用于Keras和TensorFlow框架,weights用于Darknet框架,ckpt是TensorFlow框架的一種格式,而pth則主要用于PyTorch框架...詳情>>

2023-10-15 00:05:17
大數(shù)據(jù)測(cè)試工程師需要具備哪些技能?

一、理解大數(shù)據(jù)概念大數(shù)據(jù)測(cè)試工程師需要理解大數(shù)據(jù)的基本概念和原理,如分布式存儲(chǔ)、MapReduce、實(shí)時(shí)計(jì)算等。他們還需要了解如何處理大規(guī)模的...詳情>>

2023-10-14 23:43:03
為什么SpringBoot的 jar 可以直接運(yùn)行?

一、JAR文件的結(jié)構(gòu)與執(zhí)行方式Spring Boot的JAR包是Java Archive的縮寫(xiě),它是一種壓縮文件格式,可以將Java項(xiàng)目的類(lèi)文件、資源文件以及依賴(lài)庫(kù)等...詳情>>

2023-10-14 23:01:49
快速通道