無限滾動分頁加載 vue好用插件vue-infinite-scroll 列表無限滾動加載

先放個美女的他拍照，養養眼 ~ 哈哈哈😄 準備這一波的學習，剛入職場學習的東西太多，沒聽過的，沒接觸過的太多了，但願個人這些分享能分享給剛入職場的前端人員。

需求

今天的需求是作一個滾動分頁無線加載，vue項目，開始沒有思緒後來在網上學習一波，在這裏就作個記錄吧 ~

先來看兩個圖片效果吧（錄屏不知道怎麼傳上來，會的大佬能教我嘛 😫）

大概就是醬紫 ~

安裝

官網是：github.com/ElemeFE/vue…

在main.js中加入:

示例

看到有不少寫這個的可是基本用的都是假數據，而不是分頁的求取後端的數據，因此我就來總結一波帶後端數據的 😋

給你想要滾動的部分加上這三個屬性！！滾動部分必定給一個固定高度！！
v-infinite:觸發加載更多的事件（必有項） infinite-scroll-disabled:是否潤徐滾動加載（必有） infinite-scroll-distance:滾定條距離底部多少px開始加載下一頁（自行設置）

子組件

父組件

我把loadMore事件和busy屬性 經過props傳給子組件

！！！重點來了 接口求取數據！

這裏是分爲第一次加載和屢次加載
第一次加載：直接獲取數據，滾動打開，加載ing標誌打開
第二次加載：第一頁的數據拼接第二頁的數據，也就實現了分頁請求數據，若是數據是空，即到底了，加載ing標誌關閉，滾動關閉

loadMore事件

頁號增長，過一秒請求一次數據

總結

生命不止，需求不止 🤡😇 下期見