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);
      }
    },
}

 

posted @ 2020-09-29 13:17  javascript小白菜  阅读(2787)  评论(0编辑  收藏  举报