這篇文章將為大家詳細講解有關(guān)使用Vue怎么實現(xiàn)一個滾動到頁面底部無限加載數(shù)據(jù)功能，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

創(chuàng)新互聯(lián)是一家以重慶網(wǎng)站建設(shè)公司、網(wǎng)頁設(shè)計、品牌設(shè)計、軟件運維、營銷推廣、小程序App開發(fā)等移動開發(fā)為一體互聯(lián)網(wǎng)公司。已累計為玻璃隔斷等眾行業(yè)中小客戶提供優(yōu)質(zhì)的互聯(lián)網(wǎng)建站和軟件開發(fā)服務。

創(chuàng)建項目

首先創(chuàng)建一個簡單的vue項目

# vue init webpack-simple infinite-scroll-vuejs

然后安裝項目所需要用的一些插件

# npm install axios moment

初始化用戶數(shù)據(jù)

項目搭建完后, 跑起來看看

# npm run dev

打開http://localhost:8080無誤后, 我們開始修改代碼, 先看看獲取用戶數(shù)據(jù)這塊,

這里原作者也專門提醒, 完全沒有必要也不建議在加載頁面的時候請求5次, 只是這個接口一次只能返回1條數(shù)據(jù), 僅用于測試才這樣做的. 當然我這里也可以通過Mock來模擬數(shù)據(jù), 就不詳細說了~

接下來來寫模板結(jié)構(gòu)和樣式, 如下:

.person {
 background: #ccc;
 border-radius: 2px;
 width: 20%;
 margin: 0 auto 15px auto;
 padding: 15px;

 img {
  width: 100%;
  height: auto;
  border-radius: 2px;
 }

 p:first-child {
  text-transform: capitalize;
  font-size: 2rem;
  font-weight: 900;
 }

 .text-capitalize {
  text-transform: capitalize;
 }
}

這樣頁面就能顯示5個人的個人信息了.

處理無限滾動加載邏輯

我們接下來需要在methods里面添加scroll()來監(jiān)聽滾動, 并且這個事件是應該在mounted()這個生命周期內(nèi)的. 代碼如下:

關(guān)于使用Vue怎么實現(xiàn)一個滾動到頁面底部無限加載數(shù)據(jù)功能就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。