data (){
return {
isScroll:true, //是否允许触发触底事件
}
},
methods:{
menu() {
if(this.isScroll){
let scroll =
this.getScrollTop() + this.getWindowHeight() - this.getScrollHeight();
if (scroll > -600) { //600:距离底部多少像素开始触发
console.log('触发加载更多')
}
}
},
//滚动条在Y轴上的滚动距离
getScrollTop() {
var documentScrollTop = 0;
documentScrollTop = document.documentElement.scrollTop;
return documentScrollTop;
},
//文档的总高度
getScrollHeight() {
var documentScrollHeight = 0;
documentScrollHeight = document.documentElement.scrollHeight;
return documentScrollHeight;
},
//浏览器视口的高度
getWindowHeight() {
var windowHeight = 0;
windowHeight = document.documentElement.clientHeight;
return windowHeight;
},
},
mounted (){
this.$nextTick(() =>{
window.addEventListener("scroll", this.menu);
})
},
//离开删除绑定事件
beforeDestroy(){
window.removeEventListener("scroll",this.menu)
},
vue,窗口滚动条滚动到底部加载更多
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- 在做滚动获取更多的这个需求中,我们需要获取到滚动条高度、窗口可视范围高度、文档实际内容高度、滚动条离浏览器底部的高...
- 现象:滚动条在底部触发两次加载事件 当滚动条在底部显示时 滚动分页代码实现 火狐bug:当滚动条显示在页面底部时,...
- 我国阿尔兹海默症(老年痴呆)在65岁以上人群中的发病率是5%,每增加10岁,发病率就增加5%,也就是说,85岁的人...