怎么實現一個vue無限加載指令理

發(fā)布時間：2022-04-27 10:53:57 來源：億速云閱讀：145 作者：iii 欄目：大數據

今天小編給大家分享一下怎么實現一個vue無限加載指令理的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

首先是html：

<!DOCTYPE html><html lang="en">
<head><meta charset="UTF-8">
<title>實現滾動加載</title>
<style>
 * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  }
 li, ul {
  list-style: none;
 }
 .container {
  width: 980px;
  margin: 0 auto;
 }
 .news__item {
  height: 80px;
  margin-bottom: 20px;
  border: 1px solid #eee;
 }</style>
</head>
<body>
<div class="container">
 <ul class="news" id="news">
  <li class="news__item">1、hello world</li>
  <li class="news__item">2、hello world</li>
  <li class="news__item">3、hello world</li>
  <li class="news__item">4、hello world</li>
  <li class="news__item">5、hello world</li>
  <li class="news__item">6、hello world</li>
  <li class="news__item">7、hello world</li>
  <li class="news__item">8、hello world</li>
  <li class="news__item">9、hello world</li>
  <li class="news__item">10、hello world</li>
 </ul>
</div>
</body>
</html>

打開瀏覽器，調整下瀏覽器窗口高度，讓頁面可以滾動。

先了解三個變量

document.body.scrollTop 滾動條滾動的距離
window.innerHeight 瀏覽器窗口高度
document.body.clientHeight 內容高度

對應上面的原理就是

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

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

// 表示列表的序號
var index = 10;
function loadMore() {
 var content = '';
 for(var i=0; i< 10; i++) {
  content += '<li class="news__item">'+(++index)+'、hello world</li>'  
 }
 var node = document.getElementById('news');
 // 向節(jié)點內插入新生成的數據  
 var oldContent =   node.innerHTML;
 node.innerHTML = oldContent+content;
}

這樣就實現了無限加載。

在 vue 中使用指令實現

為什么要用指令實現呢？好像只有指令是可以獲取到底層 dom 的？而實現無限加載，是需要拿到內容高度的。

首先初始化一個項目，添加一個組件，用來顯示列表。

// components/Index.vue
<template>
 <div>
  <ul class="news">
   <li class="news__item" v-for="(news, index) in newslist">
    {{index}}-{{news.title}}
   </li>
  </ul>
 </div>
</template>
<style>
 .news__item {
  height: 80px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
 }
</style>
<script>
 export default{
  data(){
   return{
    newslist: [
     {title: 'hello world'},
     {title: 'hello world'},
     {title: 'hello world'},
     {title: 'hello world'},
     {title: 'hello world'},
     {title: 'hello world'},
     {title: 'hello world'},
     {title: 'hello world'},
     {title: 'hello world'},
     {title: 'hello world'}
    ]
   }
  }
 }
</script>

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

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

首先是在組件內注冊了 scroll 指令，然后在指令第一次綁定到組件時，也就是對應著 bind鉤子，注冊滾動監(jiān)聽。

鉤子函數就是一些生命周期改變時會調用的函數。bind 在第一次綁定到組件時調用、unbind 在指令與組件解綁時調用。

還可以注意到 bind 對應到函數有兩個參數，el 和 binding，這是鉤子函數參數，比如 el 對應綁定的節(jié)點，binding 有很多數據，比如傳給指令的參數等。

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

和之前一樣，判斷滾動的高度加上窗口高度是否大于內容高度。

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

<template>
 <div v-scroll="loadMore">
  <ul class="news">
   <li class="news__item" v-for="(news, index) in newslist">
    {{index}}-{{news.title}}
   </li>
  </ul>
 </div>
</template>

可以看到給指令傳了一個值，這個值就是加載數據的函數：

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

當然，現在在滾動到底部時，只會打印load data，只要把這里改成調用函數就OK了：

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

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

至此，一個簡單的指令就完成了。

優(yōu)化

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

解決辦法是添加一個全局變量 scrollDisable，當第一次觸發(fā)加載數據函數時，將該值設置為 true，根據該值判斷是否要執(zhí)行加載函數。

以普通實現為例：

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

以上就是“怎么實現一個vue無限加載指令理”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

怎么實現一個vue無限加載指令理

猜你喜歡

最新資訊

相關推薦

相關標簽