Vue实现div滚动条到底部加载更多


<ul ref="box">
<!-- 这里面是内容 -->
</ul>

js

mounted() {
    let box = this.$refs.box;
    box.addEventListener('scroll',this.handleScroll,true);
 },
methods: {
    handleScroll(e){
      //变量scrollTop是滚动条滚动时,距离顶部的距离
      var scrollTop = e.target.scrollTop;
      //变量windowHeight是可视区的高度
      var windowHeight = e.target.clientHeight;
      //变量scrollHeight是滚动条的总高度
           var scrollHeight = e.target.scrollHeight;
      //滚动条到底部的条件
      if(scrollTop + windowHeight == scrollHeight){
        //写后台加载数据的函数
           console.log("距顶部"+scrollTop+"可视区高度"+windowHeight+"滚动条总高度"+scrollHeight);
      }
    },
}

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM