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

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

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

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

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

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

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

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

知道了生命周期，再對(duì)應(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();
 }
 });
}

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

2. mounted時(shí)期

此鉤子會(huì)在模板（html）編譯完成并掛載后調(diào)用，最開(kāi)始我想的是，在這里實(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í)做下拉操作沒(méi)有意義。

3 updated時(shí)期

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

4（ajax新獲?。?/strong>

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