vue 监听滚动至底部

最新推荐文章于 2024-03-01 22:00:00 发布

温和怪

最新推荐文章于 2024-03-01 22:00:00 发布

阅读量1.3k

点赞数

分类专栏：工作小结文章标签： vue.js

本文链接：https://blog.csdn.net/lfquan1004/article/details/117814138

版权

工作小结专栏收录该内容

5 篇文章 0 订阅

订阅专栏

需求初始化获得一部分数据在滚动至底部时通过传递当前数组的量进行二次请求获得完整数据列表

首先监听scroll事件绑定需要执行的方法：

this.$refs.theref.addEventListener('scroll', this.[方法]);

— theref: 获取需要滚动区域的ref

因为组件内部是通过数据渲染出的列表考虑vue渲染规则需要在元素渲染后执行scroll监听否则获取不到对应dom节点
所以需要配合使用 $nextTick()

this.$nextTick(()=>{
	this.$refs.theref.addEventListener('scroll', this.[方法]);
}

此时考虑性能需要添加节流

 function throttle (fn, wait) {
	  let  timer = null;
	  return function (...args) {
	    let context = this
	    if (timer) {
		      clearTimeout(timer);
		      timer = null;
	    }
	    timer = setTimeout(function () {
	      	fn.apply(context, args)
	    }, wait)
	  }
}
this.containerScrollFn = this.throttle(this.[方法], 200);
  this.$nextTick(()=>{
   this.$refs.theref.addEventListener('scroll', this.containerScrollFn);
})

最后就是需求的获取是否滚动至底部

isScrollBottom() {
      const container = this.$refs.theref;
      var scrollTop = container.scrollTop;
      var windowHeight = container.clientHeight;
      var scrollHeight = container.scrollHeight;
      if(scrollTop+windowHeight == scrollHeight){
        this.getBroadcast(this.theNum)；
        this.isBottom = true;	// 滚动至底部
      }else{
        this.isBottom = false;	
      }
    },