vue 在某个元素 中 实现滚动加载更多

html部分

<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>

js 部分

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(); //加载更多 接口函数
  }
  },
 }