226°

如何在vue中监听scroll,从而实现滑动加载更多

首先需要明确3个定义:

文档高度:整个页面的高度

可视窗口高度:你看到的浏览器可视屏幕高度

滚动条滚动高度: 滚动条下滑过的高度

当 文档高度 = 可视窗口高度 + 滚动条高度  时,滚动条正好到底。

 

首先在mounted中添加监听:window.addEventListener('scroll', this.scrollFn);   // 监听scroll

然后创建3个函数分别获取文档高度、可视窗口高度、滚动条高度:

//文档高度

getScrollTop(){
var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
  if(document.body){
    bodyScrollTop = document.body.scrollTop;
  }
  if(document.documentElement){
    documentScrollTop = document.documentElement.scrollTop;
  }
  scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
  return scrollTop;
}
 
//可视窗口高度
 
getWindowHeight(){
var windowHeight = 0;
  if(document.compatMode == "CSS1Compat"){
    windowHeight = document.documentElement.clientHeight;
  }else{
    windowHeight = document.body.clientHeight;
  }
  return windowHeight;
}
 
//滚动条高度
 
getScrollHeight(){
var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
  if(document.body){
    bodyScrollHeight = document.body.scrollHeight;
  }
  if(document.documentElement){
    documentScrollHeight = document.documentElement.scrollHeight;
  }
  scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
  return scrollHeight;
}
 
然后在scrollFn函数中判断:
 
scrollFn(){
  if(this.getScrollTop() + this.getWindowHeight() == this.getScrollHeight()){
    这里执行动态获取数据的函数
  }
}
 
最后记得销毁监听:
destroyed() {
  window.removeEventListener('scroll', this.scrollFn); // 销毁监听
}
 
如此即可实现滑动加载更多。

 

原文链接:https://www.cnblogs.com/cuiwan/p/11206319.html

全部评论: 0

    我有话说: