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

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

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

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

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

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

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

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

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

1. beforeCreate時(shí)期

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

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

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

2. mounted時(shí)期

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

3 updated時(shí)期

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

4（ajax新獲取）

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

在網(wǎng)上鎖了搜了很多資料，一些資料，比較靠譜的是設(shè)置一個(gè)延遲，setTimeout（），但是這樣頁面會(huì)有明顯的一個(gè)跳動(dòng)柑橘感覺閃動(dòng)，影響用戶體驗(yàn)，而我的處理是：

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

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

總結(jié)

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