Vue 觸底載入元件簡單實現

2022-05-21 12:27:10 字數 1062 閱讀 1514

找到乙個好用的下拉重新整理,上拉載入的vue 外掛程式   vue-scroller, git 位址

return

今天寫了個觸底載入的元件,因為經常用到,之前總會遇到一種需求,就是有乙個列表,可以實現下拉重新整理,上拉載入,

找了乙個乙個的外掛程式,填了乙個乙個的坑後,決定自己寫個觸底載入,簡單實現下這個功能,不要跟我說:「這樣不好看,我們要看

有橡皮筋那樣的彈性效果,還要有下拉重新整理,巴拉巴拉。。。。」,寫過幾次這種需求的我,已經不在乎這種效果了,丫的全是坑,

一句「可以,但沒必要」,就完了。

廢話說多了,來看下實現觸底載入的幾個步驟

1. 觸底載入的布局,乙個高度固定的容器,然後容器裡面放乙個列表,一般列表的初始高度是大於容器的高度,小於的話它滾動不了,就監聽不到

它有沒有滾到底部了。注意: 容器高度取  clientheight ,列表高度取  offsetheight

2. 監聽容器的滾動事件,在滾動時獲取滾出容器的高度,當滾出的高度加上容器的高度等於列表的高度時就觸底了。觸底載入的元件就這些邏輯了

上觸底載入元件**

123

4567

89if="loading">

1011

if="nomore">

1213

141559

然後在頁面中使用這個元件,我把元件註冊成全域性元件了,所以直接就用在頁面了

123

456這是乙個標題78

for="item in list" :key="item.id">}910

載入中11

1213

沒有更多了

1415

1617

181960

元件中有這麼幾個引數時必傳的

1.  loading  節流的,開始載入時是  true

載入更多的請求完成並顯示在頁面上了改為   false

2.   nomore 所有資料是否都已載入完成

3.  loadbottom 監聽這個事件,事件觸發後就是要載入更多了

4. 還有一些 slot ,用則寫,不用就不管了

寫乙個自己的vue觸底載入更多元件

infinite ref container style inner ref inner 列表標題 title slot 這裡放列表 slot 載入中的動畫 loading v if loading slot 載入完成的動畫 nomore v if nomore slot div div templ...

Vue 動態載入元件

為什麼要動態載入呢?而不是一次性載入呢?一次性?你能保證你拿的內容不多,那從效能方面說還是ok的。否則,就該什麼時候用,就什麼時候取。得出這想法,源於前幾天上班趕產品的故事 a元件是父親,b元件是a元件的孩子。剛剛,我在a元件裡直接載入b元件。編譯居然用了將近一分半鐘,我都還沒加其他c孩子,d孩子呢...

Vue中實現路由懶載入及元件懶載入

a 為給客戶更好的客戶體驗,首屏元件載入速度更快一些,解決白屏問題。a 懶載入簡單來說就是延遲載入或按需載入,即在需要的時候的時候進行載入。a 常用的懶載入方式有兩種 即使用vue非同步元件 和 es中的import vue中的路由未用懶載入import vue from vue import ro...