怎么實(shí)現(xiàn)一個(gè)vue無(wú)限加載指令理

 
  1、hello world
  2、hello world
  3、hello world
  4、hello world
  5、hello world
  6、hello world
  7、hello world
  8、hello world
  9、hello world
  10、hello world
 

打開瀏覽器，調(diào)整下瀏覽器窗口高度，讓頁(yè)面可以滾動(dòng)。

先了解三個(gè)變量

• document.body.scrollTop 滾動(dòng)條滾動(dòng)的距離

• window.innerHeight 瀏覽器窗口高度

• document.body.clientHeight 內(nèi)容高度

對(duì)應(yīng)上面的原理就是

window.addEventListener('scroll', function() {
 var scrollTop = document.body.scrollTop;
 if(scrollTop + window.innerHeight >= document.body.clientHeight) {
  // 觸發(fā)加載數(shù)據(jù)    
  loadMore();
 }
});
function loadMore() {
 console.log('加載數(shù)據(jù)')'
}

loadMore() 函數(shù)就是從接口獲取到數(shù)據(jù)，組裝 html，插入到原先到節(jié)點(diǎn)后面。

// 表示列表的序號(hào)
var index = 10;
function loadMore() {
 var content = '';
 for(var i=0; i< 10; i++) {
  content += ''+(++index)+'、hello world'  
 }
 var node = document.getElementById('news');
 // 向節(jié)點(diǎn)內(nèi)插入新生成的數(shù)據(jù)  
 var oldContent =   node.innerHTML;
 node.innerHTML = oldContent+content;
}

這樣就實(shí)現(xiàn)了無(wú)限加載。

在 vue 中使用指令實(shí)現(xiàn)

為什么要用指令實(shí)現(xiàn)呢？好像只有指令是可以獲取到底層 dom 的？而實(shí)現(xiàn)無(wú)限加載，是需要拿到內(nèi)容高度的。

首先初始化一個(gè)項(xiàng)目，添加一個(gè)組件，用來(lái)顯示列表。

// components/Index.vue

OK，現(xiàn)在開始編寫指令。從傳統(tǒng)實(shí)現(xiàn)中，我們了解到要注冊(cè)對(duì)滾動(dòng)事件對(duì)監(jiān)聽，同時(shí)拿到內(nèi)容高度。

directives: {
 scroll: {
  bind: function (el, binding){
   window.addEventListener('scroll', ()=> {
    if(document.body.scrollTop + window.innerHeight >= el.clientHeight) {
     console.log('load data');
    }
   })
  }
 }
}

首先是在組件內(nèi)注冊(cè)了 scroll 指令，然后在指令第一次綁定到組件時(shí)，也就是對(duì)應(yīng)著 bind鉤子，注冊(cè)滾動(dòng)監(jiān)聽。

鉤子函數(shù)就是一些生命周期改變時(shí)會(huì)調(diào)用的函數(shù)。bind 在第一次綁定到組件時(shí)調(diào)用、unbind 在指令與組件解綁時(shí)調(diào)用。

還可以注意到 bind 對(duì)應(yīng)到函數(shù)有兩個(gè)參數(shù)，el 和 binding，這是鉤子函數(shù)參數(shù)，比如 el 對(duì)應(yīng)綁定的節(jié)點(diǎn)，binding 有很多數(shù)據(jù)，比如傳給指令的參數(shù)等。

下面的el.clientHeight就是表示獲取綁定指令的這個(gè)節(jié)點(diǎn)的內(nèi)容高度。

和之前一樣，判斷滾動(dòng)的高度加上窗口高度是否大于內(nèi)容高度。

綁定指令到節(jié)點(diǎn)上：

可以看到給指令傳了一個(gè)值，這個(gè)值就是加載數(shù)據(jù)的函數(shù)：

methods: {
 loadMore() {
  let newAry = [];
  for(let i = 0; i < 10; i++) {
   newAry.push({title: 'hello world'})
  }
  this.newslist = [...this.newslist, ...newAry];
 }
}

當(dāng)然，現(xiàn)在在滾動(dòng)到底部時(shí)，只會(huì)打印load data，只要把這里改成調(diào)用函數(shù)就OK了：

 window.addEventListener('scroll', ()=> { 
 if(document.body.scrollTop + window.innerHeight >= el.clientHeight) {  
  let fnc = binding.value;  
  fnc(); 
 }
})

v-scroll="loadMore"的 loadMore可以在鉤子函數(shù)參數(shù)的 binding 上拿到。

至此，一個(gè)簡(jiǎn)單的指令就完成了。

優(yōu)化

上面的例子并沒有真正從接口獲取數(shù)據(jù)，所以存在一個(gè)隱藏的 bug：當(dāng)接口響應(yīng)很慢的情況，滾動(dòng)到底部正在加載數(shù)據(jù)時(shí)，稍微滾動(dòng)一下仍會(huì)觸發(fā)獲取數(shù)據(jù)函數(shù)，這會(huì)造成同時(shí)請(qǐng)求多次接口，一次性返回大量數(shù)據(jù)。

解決辦法是添加一個(gè)全局變量 scrollDisable，當(dāng)?shù)谝淮斡|發(fā)加載數(shù)據(jù)函數(shù)時(shí)，將該值設(shè)置為 true，根據(jù)該值判斷是否要執(zhí)行加載函數(shù)。

以普通實(shí)現(xiàn)為例：

var scrollDisable = false;
window.addEventListener('scroll', function() {
 var scrollTop = document.body.scrollTop;
 if(scrollTop + window.innerHeight >= document.body.clientHeight) {
  // 觸發(fā)加載數(shù)據(jù)    
  if(!scrollDisable) {
   // 
   loadMore(); 
  } 
 }
});
// 表示列表的序號(hào)
var index = 10;
function loadMore() {
  // 開始加載數(shù)據(jù)，就不能再次觸發(fā)這個(gè)函數(shù)了
 scrollDisable = true;
 var content = '';
 for(var i=0; i< 10; i++) {
  content += ''+(++index)+'、hello world'  
 }
 var node = document.getElementById('news');
 // 向節(jié)點(diǎn)內(nèi)插入新生成的數(shù)據(jù)  
 var oldContent =   node.innerHTML;
 node.innerHTML = oldContent+content;
 // 插入數(shù)據(jù)完成后  
 scrollDisable = false;
}

以上就是“怎么實(shí)現(xiàn)一個(gè)vue無(wú)限加載指令理”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。