Vue.js框架：滚动条滚动监听方法和触底判断机制

一、滚动监听

　　1.监听方法

　　通过@scroll事件进行监听，回调参数为事件

 @scroll="scrollEvent($event)"

　　常用于滚动条滚动时懒加载数据，避免一次性拉取过多数据造成渲染时卡顿。或者上拉到顶触发数据刷新。

　　2.触底判断

　　在滚动条滚动的过程中，每次只要滚动条的位置发生了变化，都会触发一次监听的方法。

　　下面是用到的几个属性值：

//滚动条到最上方的高度，即拉到当前页面时上面已经隐藏掉的高度

e.target.scrollTop

//滚动条现在能看到的高度，当前页面区域高度

e.target.clientHeight

//滚动条控制的总高度(到底的时候，上面隐藏的高度加上现在能看到的区域高度应该等于总高度) 

e.target.scrollHeight

　　通过三个值的比较进行触底判断：

//触底判断
if(e.target.scrollTop + e.target.clientHeight == e.target.scrollHeight){
  //触底时进行操作 
 
}

　　为了避免重复触发，最好是加个防抖或者加锁。

 

__EOF__

本文作者：我命倾尘
本文链接：https://www.cnblogs.com/guobin-/p/16323532.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！