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){
  //触底时进行操作 
 
}

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