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的優點

Vue具體輕量級框架、簡單易學、雙向數據綁定、組件化、數據和結構的分離、虛擬DOM、運行速度快等優勢，Vue中頁面使用的是局部刷新，不用每次跳轉頁面都要請求所有數據和dom，可以大大提升訪問速度和用戶體驗。

以上就是“vue怎么添加滾動加載更多功能”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。