image.png
上拉加載的本質(zhì)是??觸底，或者快要觸底時(shí)的動(dòng)作
判斷??觸底我們需要先了解?下下??個(gè)屬性
?scrollTop ：滾動(dòng)視窗的?度距離 window 頂部的距離施掏，它會(huì)隨著往上滾動(dòng)?不斷增加钮惠，初始值是0，它是?個(gè)變化的值
?clientHeight :它是?個(gè)定值七芭，表示屏幕可視區(qū)域的?度素挽；
?scrollHeight ：??不能滾動(dòng)時(shí)也是存在的,此時(shí)scrollHeight等于clientHeight。scrollHeight表示 body 所有元素的總?度(包括body元素?身的padding)
綜上我們得出?個(gè)觸底公式：
scrollTop + clientHeight >= scrollHeight
簡(jiǎn)單實(shí)現(xiàn)
<script setup>
import { onUnmounted } from 'vue';
const clientHeight = document.documentElement.clientHeight; //瀏覽器?度
const distance = 50; //距離視窗還有50的時(shí)候抖苦，開(kāi)始觸發(fā)；
const fun = () => {
let scrollHeight = document.body.scrollHeight; // 內(nèi)容高度
let scrollTop = document.documentElement.scrollTop; // 滾動(dòng)高度
if ((scrollTop + clientHeight) >= (scrollHeight - distance)) {
console.log("開(kāi)始加載數(shù)據(jù)");
}
}
// 添加滾動(dòng)監(jiān)聽(tīng)
window.addEventListener('scroll', fun);
// 頁(yè)面卸載清除監(jiān)聽(tīng)
onUnmounted(() ={
window.removeEventListener('scroll', fun)
});
</script>
