vueJs實現DOM加載完之后自動下拉到底部的實例代碼

這篇文章給大家介紹vueJs實現DOM加載完成之后自動下拉到底部，文中給大家記錄了整個問題的過程，對實現思路感興趣的朋友大家閱讀下本文。

/.....................................更新..................................../

這個問題是很早之前遇到的，后來想來，其實是個很簡單的問題。在dom記載完成就自動下拉到底部，只需要使用Vue.nextTick(() => {})函數即可，因為vue是虛擬dom，不會實時更新dom，nectTick()就是注冊在下一次更新dom之后的回調。

而再看我的問題，其實之所以出現那樣的問題，就是ajax的異步執行的問題而已。

/..................................................更新完..................../

工作項目是基于vueJs框架的，遇到一個需求：有一組件，在創建時會通過ajax向服務器請求一組數據，以列表形式展示出來，并且自動下拉到底部。

實現思路：首先弄清楚vueJs組件的生命周期，如下圖。發完發現圖不見了...這里貌似不能放圖，就是vueJs生命周期和鉤子，讀者自行百度一下吧，到處都是。

具體細節不做介紹，自行看圖或者右轉官網查找http://cn.vuejs.org/

知道了生命周期，再對應需求，很自然地關注三個時期beforeCreate，mounted，updated.

1. beforeCreate時期

此時期相當于做一些初始化工作，此時做ajax最合適。代碼如下：

beforeRouteEnter(to, from, next) {
 next(function(vm) {
 if (vm.dataList.length == 0) {
  //此處實現ajax
  vm.getVersionInfo();
 }
 });
}

代碼是之前寫的，使用的beforeRouteEnter鉤子（vm：因為此時該組件可能還未創建，所以不能用this，而用vm代替，vm所執行代碼會在其創建之后執行。），這個鉤子會在每次通過vue-route路由進入組件頁面前調用，而需求是只有第一次進入需要自動執行ajax，因此還做了判斷data是否長度為0，而在寫博的時候發現，如果使用beforeCreate鉤子應該就不會有這么多麻煩，不過也僅僅是猜測，使用請自行驗證。

2. mounted時期

此鉤子會在模板（html）編譯完成并掛載后調用，最開始我想的是，在這里實現一個自動滾動到底部的操作，但是發現不行。為什么呢？因為ajax是異步操作，在beforeCreate時期執行了ajax，并不能保證在mounted時，數據已經傳回，所以此時做下拉操作沒有意義。

3 updated時期

此鉤子在組件對象data數據發生變化時，而我在ajax的success回調函數里會改變data，所以此時調用應該是很合適的。然而，實現之后又出現了問題，每次自動下拉滾動到底部只能下拉滾動到data原列表的最底部，而新添加的項還在下面。舉例來說

4（ajax新獲取）

每次updated處執行ajax下拉操作自動下拉滾動，只能會到4，而不是5的位置。究其原因，原來是因為updated是執行時，打他只是data改變，而有可能document并沒有渲染完成，從而導致，不能處理新添加的項，而偏偏vue并沒有提供渲染完成的鉤子。

在網上鎖了搜了很多資料，一些資料，比較靠譜的是設置一個延遲，setTimeout（），但是這樣頁面會有明顯的一個跳動柑橘感覺閃動，影響用戶體驗，而我的處理是：

updated() {
 let count = 0;
 let interval = setInterval(() => {
  if (count > 3000) {
  clearInterval(interval);
  this.isFirst = false;
  }
  count++;
  if (document.body.scrollHeight != document.body.clientHeight) {
  document.body.scrollTop = document.body.scrollHeight;
  if (document.body.scrollTop == document.body.scrollHeight-document.body.clientHeight) {
   clearInterval(interval);
   this.isFirst = false;
  }
  }
 }, 0);
}

這個原理應該很簡單，看代碼應該能看明白。

總結

以上所述是小編給大家介紹的vueJs實現DOM加載完之后自動下拉到底部的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！