| vue.js判断滚动条滚动到底部后（防抖节流）进行数据的分页请求 | 您所在的位置：网站首页 › vue滚动加载scroll › vue.js判断滚动条滚动到底部后（防抖节流）进行数据的分页请求 |
vue.js判断滚动条滚动到底部后（防抖节流）进行数据的分页请求
|
vue.js判断滚动条滚动到底部后（防抖节流）进行数据的分页请求
整体思路监听代码防抖节流
整体思路
VUE2.0其实有很多的插件来，而且功能很强大，还提供很多的插槽来，之前跟着师父做的项目里直接用了vue-infinite-loading，功能也很强大，点击这里可以直接看我之前写的博客。 vue-infinite-loading: 链接. 今天主要介绍一下原生的JS怎么去做判断 主要用3个属性，scrollTop，scrollHeight，clientHeight scrollTop：鼠标滚动Y轴的距离 scrollHeight：滚轮的整体高度 clientHeight：浏览器的可视高度 so：判断滚动到底部的判断就是 if(scrollTop+clientHeight==scrollHeight) 监听代码 mounted() { window.addEventListener('scroll',this.handleScroll) }, methods: { handleScroll(){ let scrollTop=document.documentElement.scrollTop//滚动条在Y轴滚动过的高度 let scrollHeight=document.documentElement.scrollHeight//滚动条的高度 let clientHeight=document.documentElement.clientHeight//浏览器的可视高度 //so 判断滚动条到底部的判断条件就是 //scrollTop+clientHeight==scrollHeight // console.log('滚动高度',document.documentElement.scrollHeight) // console.log('浏览器的可视高度',document.documentElement.clientHeight) // console.log('距离顶部的高度u',scrollTop) if(scrollTop+clientHeight==scrollHeight){ console.log('滚动到底部了') } } }
防抖就是规定时间内执行最后一次，节流就是规定时间内执行第一次 //防抖 debounce(fn, delay) { let timer = null; //借助闭包 return function () { if (timer) { clearTimeout(timer); } timer = setTimeout(fn, delay); // 简化写法 }; }, mounted() { window.addEventListener("scroll", this.debounce(this.handleScroll, 500)); },这样的话就是0.5秒内触发一次。 |
其实这样的话会发现对我们浏览器的性能消耗是很大的，so我们要对它进行优化，优化的2个方式就是防抖和节流。【本文地址】
公司简介
联系我们