如何在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); // 销毁监听

}

 

如此即可实现滑动加载更多。