vue.js项目是否到达底部判断,加上节流
节流和防抖资料参考一位大神:https://justclear.github.io/throttle-and-debounce/
created (){
window.onscroll = throttle(onScroll)
function onScroll() {
//变量scrollTop是滚动条滚动时,距离顶部的距离
let scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
//变量windowHeight是可视区的高度
let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
//变量scrollHeight是滚动条的总高度
let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
//滚动条到底部的条件
if( scrollTop+windowHeight == scrollHeight ){
//写后台加载数据的函数
console.log('到底部了');
}
}
//函数节流
function throttle(fn, interval=300) {
let canRun = true;
return function() {
if(!canRun) return;
canRun = false;
setTimeout(() => {
fn.apply(this, arguments);
canRun=true;
}, interval);
}
}
}