vue项目实现盒子滚动到底部加载更多的功能

vue项目实现div盒子滚动到底部加载更多的功能

使用vue 的 scroll 事件 可以很快的实现
----html

  <div class="scroll_box" ref="evabox" @scroll="Scroll">
    <div v-for="(item,index) in imgList" :key="index">
     	{
     {
     item}}                 
     </div>
  </div>

----methods

 Scroll (e) {
     
        // console.log(this.$refs.evabox.scrollTop) 
        const ele = e.srcElement ? e.srcElement : e.target
         // 监听滚动到div底部
        if (ele.scrollTop + ele.offsetHeight > ele.scrollHeight - 100) {
      
          this.loading = true//底部设置一个loading 开启加载动画
          if (this.flag === false) {
     //避免多次请求 加锁 该次请求完成 才能再次发起请求
            this.flag = true
           	.....发起请求 请求结束  记得关锁 关闭loading
          }
        }
      },

如果不能实现 检查一下是不是div没有滚动条 没法滚动 加上css
盒子高度和 overflow-y: auto;就可以了