Vue滚动到底部加载更多数据

之前呢写过这种篇章的博客，但是有时候还是有点问题的，这个呢代码和人是一样的，他喜欢活灵活现哈哈，下面在总结以下！
滚动到底部加载数据这个呢可以使用@scroll事件也可以获取可视区高度、滚动高度、页面高度判断去写。
具体如何实现呢？

结合着代码去讲解，以及遇到的坑！！！

<template>
  <div>
     // 这里呢内容随便写，只要超过了可视区就可以触发事件
  </div>
</template>

<script>
export default {
    methods:{
        	lazyLoading () { 
        		// 滚动到底部，再加载的处理事件
        		// 获取 可视区高度`、`滚动高度`、`页面高度`
	            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
	            let clientHeight = document.documentElement.clientHeight;
	            let scrollHeight = document.documentElement.scrollHeight;
	            if (scrollTop + clientHeight >= scrollHeight) { // 滚动到底部，逻辑代码
	                //事件处理
	                console.log("滚动到底部，触发")//此处可以添加数据请求
	                // 这这里可以写一些业务逻辑，请求数据等
                }
       		 }
    },
    // 这里呢首先在methods里面写好一个方法，最后通过`window.addEventListener`去调用
    created()
    {
        window.addEventListener('scroll', this.lazyLoading); // 滚动到底部，再加载的处理事件
    }，
    //页面离开后销毁，防止切换路由后上一个页面监听scroll滚动事件会在新页面报错问题 
    destroyed() { 
    	window.removeEventListener('scroll', this.lazyLoading)
    	//页面离开后销毁，防止切换路由后上一个页面监听scroll滚动事件会在新页面报错问题 
    }
}
</script>

<style lang="scss" scoped>

</style>

这里有的会遇到问题有的不会
1.如果滚动到底部没有触发这个事件 window.addEventListener('scroll', this.lazyLoading，true); 设置第三个参数为true这样不管你是否是设置了overflow：scroll还是什么的都可以触发这个事件了
2.我今天去写了一下滚动到底部加载更多数据时候，因为提供的接口是页码的，所以滚动到底部让页码++
但是加载2~3次的时候就不会触发这个事件了，那么如何解决呢？

 if (scrollTop + clientHeight >= scrollHeight-4) 
 把这个if判断的逻辑稍微改一下

scrollHeight 呢稍微减一下 就可以解决这个问题了

使用@scroll也是可以实现的，看个人习惯吧，逻辑都是一样的，比如@scroll使用event对象获取scroll
今天就分享到这