vue-滚动加载组件
<template> <div id="infiniteScroll" class="infinite-scroll"> <slot></slot> </div> </template> <script> /** * 用法: * 将该组件放在列表最下方,其直接父级元素为滚动的包含块 * window.INFINITE_BUSY 用来控制是否监听无限加载 * dis为开始进行下次加载的检测距离 */ export default { data(){ return { } }, props:{ dis:{ type:Number, default:200 } }, mounted(){ let detectDom = document.getElementById('infiniteScroll'); let scrollDom = this.scrollDom = detectDom.parentElement; scrollDom.addEventListener('scroll',this.scrollMonitor); window.INFINITE_BUSY = false; }, methods:{ scrollMonitor(){ if(window.INFINITE_BUSY) return; requestAnimationFrame(this.loadMonitor); window.INFINITE_BUSY = true; }, loadMonitor(){ let scrollDom = this.scrollDom; let totalLength = scrollDom.scrollHeight; let viewLength = scrollDom.clientHeight; let scrollLength = scrollDom.scrollTop; if(totalLength > viewLength && viewLength + scrollLength > totalLength - this.dis){ this.$emit('loadmore') return } window.INFINITE_BUSY = false; } } } </script> <style lang="postcss"> </style>
getWindowHeight(){
let windowHeight = 0;
if(document.compatMode == "CSS1Compat"){
windowHeight = document.documentElement.clientHeight;
}else{
windowHeight = document.body.clientHeight;
}
return windowHeight;
},
videoScroll(e){
if(!this.shouldAj){
return
}
if(this.remian>0){
if((e.target.scrollTop + this.getWindowHeight()+100) >= document.getElementsByClassName('page')[0].scrollHeight){
this.start+=19
this.getRecommendList()
}
}
},