vue 上拉動態載入資料

2021-09-20 10:07:49 字數 1063 閱讀 5933

需要用到dom的三個屬性值,即scrolltopclientheightscrollheight

scrolltop為滾動條在y軸上的滾動距離。

clientheight為內容可視區域的高度。

scrollheight為內容可視區域的高度加上溢位(滾動)的距離。

從這個三個屬性的介紹就可以看出來,滾動條到底部的條件即為scrolltop + clientheight == scrollheight。(相容不同的瀏覽器)。

注意:判斷,到達視窗底部的時候,執行對應的操作。

補充::資料請求有三種

如上圖,在雲平台–新聞專題中的列表載入,後端返回總條數

比如總共16條資料,每頁資料條數pagesize=20,那麼共有getpageno這麼多頁。

math.ceil 這個函式代表向上取整如:1.6,向上取整為2

pageno:**要傳遞的當前頁碼

(下面這個是有點涉及到後台的資料處理,可以忽略,具體應用主要在第一條)自定義的方法在向後台傳送請求資料的方法,其中每次呼叫後都執行 page++,這樣才能保證每次請求的資料不重複,如:

num=5; //num是自定的每次請求的條數

start=page∗start=page∗num

Vue 動態載入元件

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

python非同步載入和動態 Vue動態載入非同步元件

背景 目前我們專案都是按元件劃分的,然後各個元件之間封裝成產品。目前都是採用iframe直接巢狀頁面。專案中我們還是會碰到一些通用的元件跟業務之間有通訊,這種情況下iframe並不是最好的選擇,iframe存在跨域的問題,當然是postmessage還是可以通訊的,但也並非是最好的。目前有這麼乙個場...

vue動態載入靜態資源

專案背景 專案的使用場景是面向資訊保安相關部門,環境很有可能沒有公網,區域網並不穩定,所以無法使用七牛等cdn儲存資源。從而採用引入本地資源的方式 通常一張本地靜態在vue中的寫法是這樣 但是,img標籤如果在src路徑中使用變數,會被編譯為字串,導致編譯後的路徑就是我們寫上去的字串形式,比如你在d...