Heim > Artikel > Web-Frontend > So implementieren Sie einfache Anweisungen zum unendlichen Laden von Vue

So implementieren Sie einfache Anweisungen zum unendlichen Laden von Vue

不言Original: 2018-06-29 15:55:502612Durchsuche

Dieser Artikel stellt hauptsächlich die Methode zur Implementierung einfacher Vue-Infinite-Load-Anweisungen vor. Er hat einen bestimmten Referenzwert. Jetzt können Freunde in Not darauf verweisen Lassen Sie uns vorstellen, wie Sie eine einfache Anweisung anpassen, indem Sie nach unten scrollen, um Daten zu laden und ein unendliches Laden zu erreichen.

Das Prinzip des unendlichen Ladens besteht darin, das Scroll-Ereignis zu überwachen. Bei jedem Scrollen müssen Sie die Scroll-Distanz plus die Höhe des Browserfensters ermitteln Die Funktion „Daten laden“ wird ausgelöst.

Stellen Sie zunächst vor, wie Sie ohne Verwendung von Vue unbegrenztes Laden erreichen können.

Verwenden Sie keine Frames

Das erste ist 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>
<p 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>
</p>
</body>
</html>

Öffnen Sie den Browser und passen Sie den Browser an Fensterhöhe, um die Seite scrollbar zu machen.

Verstehen Sie zunächst die drei Variablen

Die Funktion

window.addEventListener(&#39;scroll&#39;, function() {
 var scrollTop = document.body.scrollTop;
 if(scrollTop + window.innerHeight >= document.body.clientHeight) {
  // 触发加载数据    
  loadMore();
 }
});
function loadMore() {
 console.log(&#39;加载数据&#39;)&#39;
}

loadMore() besteht darin, die Daten von der Schnittstelle abzurufen, den HTML-Code zusammenzustellen und ihn hinter dem ursprünglichen Knoten einzufügen.

// 表示列表的序号
var index = 10;
function loadMore() {
 var content = &#39;&#39;;
 for(var i=0; i< 10; i++) {
  content += &#39;<li class="news__item">&#39;+(++index)+&#39;、hello world</li>&#39;  
 }
 var node = document.getElementById(&#39;news&#39;);
 // 向节点内插入新生成的数据  
 var oldContent =   node.innerHTML;
 node.innerHTML = oldContent+content;
}

Dadurch wird unbegrenztes Laden erreicht.

Verwenden Sie Anweisungen zur Implementierung in Vue

Warum müssen Sie Anweisungen verwenden, um es zu implementieren? Es scheint, dass nur Anweisungen das zugrunde liegende DOM erhalten können? Um eine unendliche Ladung zu erreichen, müssen Sie die Inhaltshöhe ermitteln.

Initialisieren Sie zunächst ein Projekt und fügen Sie eine Komponente hinzu, um die Liste anzuzeigen.

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

OK, jetzt fang an, Anweisungen zu schreiben. Aus der traditionellen Implementierung haben wir gelernt, dass wir uns registrieren müssen, um auf Scroll-Ereignisse zu warten und gleichzeitig die Inhaltshöhe zu erhalten.

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

Zuerst wird die Bildlaufanweisung in der Komponente registriert und dann, wenn die Anweisung zum ersten Mal an die Komponente gebunden wird, also entsprechend Durch den Bind-Hook wird der Scroll-Monitor registriert.

Hook-Funktionen sind Funktionen, die aufgerufen werden, wenn sich der Lebenszyklus ändert. bind wird aufgerufen, wenn es zum ersten Mal an die Komponente gebunden wird, und unbind wird aufgerufen, wenn die Bindung der Anweisung an die Komponente gelöst wird.

Sie können auch feststellen, dass bind zwei Parameter der Funktion entspricht: el und binding. Dies sind Hook-Funktionsparameter. Beispielsweise entspricht el dem gebundenen Knoten. wie die an den Befehl übergebenen Parameter usw.

Die folgende el.clientHeight stellt die Inhaltshöhe des Knotens dar, der die Bindungsanweisung erhält.

Bestimmen Sie wie zuvor, ob die Bildlaufhöhe plus die Fensterhöhe größer als die Inhaltshöhe ist.

Binden Sie den Befehl an den Knoten:

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

Sie können sehen, dass ein Wert an den Befehl übergeben wird, bei dem es sich um die zu ladende Funktion handelt Daten:

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

Natürlich werden jetzt beim Scrollen nach unten nur die Ladedaten gedruckt, um die Funktion aufzurufen:

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

Das LoadMore von v-scroll="loadMore" kann aus der Bindung des Hook-Funktionsparameters abgerufen werden.

An diesem Punkt ist ein einfacher Befehl abgeschlossen.

Optimierung

Das obige Beispiel ruft tatsächlich keine Daten von der Schnittstelle ab, daher gibt es einen versteckten Fehler: Wenn die Schnittstellenreaktion sehr langsam ist, scrollen Sie bis zum Ende Beim Laden der Daten wird durch leichtes Scrollen immer noch die Datenerfassungsfunktion ausgelöst, die mehrere Schnittstellenanforderungen gleichzeitig verursacht und eine große Datenmenge auf einmal zurückgibt.

Die Lösung besteht darin, eine globale Variable scrollDisable hinzuzufügen. Wenn die Ladedatenfunktion zum ersten Mal ausgelöst wird, setzen Sie den Wert auf true und verwenden Sie diesen Wert, um zu bestimmen, ob die Ladefunktion ausgeführt werden soll.

Nehmen Sie die allgemeine Implementierung als Beispiel:

var scrollDisable = false;
window.addEventListener(&#39;scroll&#39;, function() {
 var scrollTop = document.body.scrollTop;
 if(scrollTop + window.innerHeight >= document.body.clientHeight) {
  // 触发加载数据    
  if(!scrollDisable) {
   // 
   loadMore(); 
  } 
 }
});
// 表示列表的序号
var index = 10;
function loadMore() {
  // 开始加载数据，就不能再次触发这个函数了
 scrollDisable = true;
 var content = &#39;&#39;;
 for(var i=0; i< 10; i++) {
  content += &#39;<li class="news__item">&#39;+(++index)+&#39;、hello world</li>&#39;  
 }
 var node = document.getElementById(&#39;news&#39;);
 // 向节点内插入新生成的数据  
 var oldContent =   node.innerHTML;
 node.innerHTML = oldContent+content;
 // 插入数据完成后  
 scrollDisable = false;
}

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für alle hilfreich sein Weitere Informationen finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Über die Konfigurationseinführung der Verwendung von Typescript in Vue2 Vue-cli

Über die Implementierung des Vue-Kommentar-Framework (Implementierung der übergeordneten Komponente)

Das obige ist der detaillierte Inhalt vonSo implementieren Sie einfache Anweisungen zum unendlichen Laden von Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php typescript html 全局变量接口事件 dom bug

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Einführung in die Konfiguration der Verwendung von Typescript in Vue2 Vue-cliNächster Artikel：Einführung in die Konfiguration der Verwendung von Typescript in Vue2 Vue-cli

In Verbindung stehende Artikel

Mehr sehen