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

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

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

而再看我的問題，其實之所以出現(xiàn)那樣的問題，就是ajax的異步執(zhí)行的問題而已。

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

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

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

具體細(xì)節(jié)不做介紹，自行看圖或者右轉(zhuǎn)官網(wǎng)查找http://cn.vuejs.org/

知道了生命周期，再對應(yīng)需求，很自然地關(guān)注三個時期beforeCreate，mounted，updated.

1. beforeCreate時期

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

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

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

2. mounted時期

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

3 updated時期

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

4（ajax新獲取）

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

在網(wǎng)上鎖了搜了很多資料，一些資料，比較靠譜的是設(shè)置一個延遲，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);
}

這個原理應(yīng)該很簡單，看代碼應(yīng)該能看明白。

總結(jié)

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

最新評論