监听滚动条和触底判断

https://www.cnblogs.com/guobin-/p/16323532.html

判断滚动条是否滚动到页面底部 - 简书

目录

一、滚动监听

二、代码实现：

---

一、滚动监听

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

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

二、代码实现：

mounted(){
window.addEventListener('scroll', this.handleScroll,true) // 监听页面滚动*/
},
methods:{
handleScroll () {
      //变量scrollTop是滚动条滚动时，距离顶部的距离
      let scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
      //变量windowHeight是可视区的高度
      let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
      //变量scrollHeight是滚动条的总高度
      let scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
      let dataArr = []
      //滚动条到底部的条件
      if(scrollTop + windowHeight === scrollHeight){
        dataArr = this.giftList //把上一页的数据赋给dataArr
        this.pageNum = this.pageNum + 1
        this.getList()//请求到新一页的数据
        this.giftList = dataArr.concat(this.giftList)//数据拼接
      }
    },
// 获取所有展示的兑好礼列表,服务端接口用 rpc
getList(){
      let param = {}
     接口(param,function(res){
        let res = this.response(res)
        this.giftList = res.list 
      })
   },
}