如何通过原生vue添加滚动加载更多功能

这篇文章给大家分享的是有关如何通过原生vue添加滚动加载更多功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

vue中添加滚动加载更多，因为是单页面所以需要在跳出页面时候销毁滚动，要不会出现错乱。我们在mounted建立滚动，destroyed销毁滚动。

mounted () {
  window.addEventListener('scroll', this.handleScroll)
},
destroyed () {
  window.removeEventListener('scroll', this.handleScroll)
},

定义一个函数，在滚动到底部时候使滚动条距离顶部距离与可视区域高度之和等于滚动条总高度，在加载后如果列表长度为0时应该停止加载，要不会出现一直加载的情况

handleScroll () {
    //变量scrollTop是滚动条滚动时，距离顶部的距离
    var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
    //变量windowHeight是可视区的高度
    var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
    //变量scrollHeight是滚动条的总高度
    var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
    //滚动条到底部的条件
    if(scrollTop+windowHeight==scrollHeight &&this.list.length !==0){
      this.loadMore() // 加载的列表数据
    }
  }

感谢各位的阅读！关于“如何通过原生vue添加滚动加载更多功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！