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