vue监听页面是否以到底部

项目中经常用到上拉加载数据列表，平时使用组件库可以快速的实现，今天整理一下原生写法

思路：距离顶部的距离+ 可视区域高度 == 滚动条高度 如果成立说明已经到页面底部

获取距离顶部的距离：var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;

获取可视区域高度：var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;

获取滚动条高度：var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;

注意：在vue的created钩子中使用
window.onscroll = function()｛…｝：触发监听的函数

created(){
	window.onscroll = function(){
   		var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
   		var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
   		var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
        
        if(scrollTop+windowHeight==scrollHeight){
           //写后台加载数据的函数
         	console.log("距顶部"+scrollTop+"可视区高度"+windowHeight+"滚动条总高度"+scrollHeight);
        }   
    }
}