vue里某一元素添加滚动事件并上拉加载更多数据

当你并不是整页滚动，而是页面中拥有一个fixed固定的头部时

<div class="body-container" style="height: 300px" @scroll="scrollEvent">

 <div style="height: 200px"></div>
 <div style="height: 200px"></div>
 <div style="height: 200px"></div>
</div>

重点：只要我能让<div class="body-container" @scroll="scrollEvent">拥有固定高度，就能触发滚动事件了。

接下来添加滚动事件

export default {

 name: \'demo\',
 data () {
  return {
  msg: \'\',
  }
 },
 methods: {
  scroll(e){
  //滚动的像素+容器的高度>可滚动的总高度-100像素
  if(e.srcElement.scrollTop+e.srcElement.offsetHeight>e.srcElement.scrollHeight-100){
   this.loadMore(); //加载更多
  }
  },
 }
}

这样就能比较清晰的判断是否滚动到了底部。但是如果仅仅这样写，当滚动到底部100px内时，会触发很多次加载更多，所以我们需要增加一些判断条件

methods: {

  scroll(e){
  // !this.moreLoading 没有在加载状态，触发加载更多时，把this.moreLoading置未true
  // !this.noMore 没有更多的状态为false，当我们取到的数据长度小于1页的数量时，就没有更多了数据了，把 this.noMore置为true，这样就不会触发无意义的加载更多了
  if(e.srcElement.scrollTop+e.srcElement.offsetHeight>e.srcElement.scrollHeight-100 && !this.moreLoading && !this.noMore){
   this.loadMore();
  }
  },
 }

仅为自己学习记录笔记
原文地址：https://www.jb51.net/article/171961.htm