scrollheight：指元素的總高度，包含滾動條中的內容。唯讀屬性。不帶px單位。就是下圖中，54條資料的高度，但是因為有滾動條，所以螢幕看不到這麼高
scrolltop：當元素出現滾動條時，向下拖動滾動條，內容向上滾動的距離。可讀可寫屬性。不帶px單位。如果該元素沒有滾動條，則scrolltop的值為0，該值只能是正值。就是下圖中紅色框的高度
clientheight：元素客戶區的大小，指的是元素內容及其邊框所佔據的空間大小，實際上就是可視區域的大小。就是下圖紅色箭頭的高度
scrollheight-scrolltop-clientheight=0，這個時候可以就是滾動條滾到底部的時候了。
在第一次請求資料的時候，先設定乙個變數來記錄請求次數（其實後台也是做分頁的處理）
this
.currentpage =1,
$this
=this
;this
.$axios.
fun().
then
(res=
>
)
let dom = document.
queryselector
(targetdom)
; dom.
addeventlistener
("scroll"
,function()
)}}}
)
main.js
/*自定義事件*/
vue.
directive
('loadmore'
,else
if(t < p)
else
t = p;
//判斷是否到底
const sign =10;
const scrolldistance =
this
.scrollheight -
this
.scrolltop -
this
.clientheight
if(scrolldistance <= sign && down)})}})
v-loadmore=
"loadmore"
//自定義**滾動事件
loadmore()
,1000
) console.
log(
'到底了'
,this
.pagenumber)
this
.getlefttable
(this
.pagenumber)
//請求this.axios(`,})
.then
(res =
>})
;}},
原生 懶載入
1 公共檔案 var utils function 顏色隨機 randomcolor function return col 2 邏輯分解 1 建立ul li，建立指定數量的li，並且做浮動，設定li的寬度 2 建立乙個陣列，這個陣列裡面是統計每個li的當前高度 3 建立，載入，設定寬度，獲取高度 ...
路由懶載入與元件懶載入
一 為什麼要使用路由懶載入 為給客戶更好的客戶體驗，首屏元件載入速度更快一些，解決白屏問題。二 定義 懶載入簡單來說就是延遲載入或按需載入，即在需要的時候的時候進行載入。三 使用 常用的懶載入方式有兩種 即使用vue非同步元件 和 es中的import 1 不用懶載入，vue中路由 如下 impor...
js原生懶載入與和種高度問題
懶載入條件 img.offsettop window.innerheight document.body.scrolltop 的src為空,寫在data src屬性上 滿足條件則取dataset的src賦值給src即可 效能優化則利用去抖節流即可 滾動時可以判斷方向 向下滾動 利用數組裝未渲染的 也...