Comment implémenter des instructions de chargement simples avec Vue Infinite-js tutoriel-php.cn

Comment implémenter des instructions de chargement simples avec Vue Infinite

不言

Libérer： 2018-06-29 15:55:50

original

2568 Les gens l'ont consulté

Cet article présente principalement la méthode d'implémentation d'instructions de chargement simples avec vue infinie. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent se référer à

Instructions personnalisées dans vue. DOM sous-jacent. Présentons comment personnaliser une instruction simple en faisant défiler vers le bas pour charger les données et obtenir un chargement infini.

Le principe du chargement infini est de surveiller l'événement de défilement. Chaque fois que vous faites défiler, vous devez obtenir la distance de défilement plus la hauteur de la fenêtre du navigateur est supérieure ou égale à la hauteur du contenu. La fonction sera déclenchée.

Présentez d'abord comment obtenir un chargement illimité sans utiliser vue.

Ne pas utiliser de cadres

Le premier est 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>

Copier après la connexion

Ouvrez le navigateur et ajustez la navigation La hauteur de la fenêtre du navigateur pour que la page puisse défiler.

Comprenez d'abord les trois variables

document.body.scrollTop La distance à laquelle la barre de défilement fait défiler la
fenêtre . La hauteur de la fenêtre du navigateur innerHeight
la hauteur du contenu document.body.clientHeight

correspondant au principe ci-dessus est

La fonction

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

Copier après la connexion

loadMore() consiste à obtenir les données de l'interface, à assembler le code HTML et à l'insérer derrière le nœud d'origine.

// 表示列表的序号
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;
}

Copier après la connexion

Cela permet d'obtenir un chargement infini.

Utiliser les instructions pour l'implémenter dans vue

Pourquoi avez-vous besoin d'utiliser des instructions pour l'implémenter ? Il semble que seules les instructions puissent obtenir le DOM sous-jacent ? Pour obtenir un chargement infini, vous devez obtenir la hauteur du contenu.

Initialisez d'abord un projet et ajoutez un composant pour afficher la liste.

// 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>

Copier après la connexion

OK, commencez maintenant à rédiger les instructions. De l'implémentation traditionnelle, nous avons appris que nous devons nous inscrire pour écouter les événements de défilement et obtenir la hauteur du contenu en même temps.

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

Copier après la connexion

Tout d'abord, l'instruction de défilement est enregistrée dans le composant, puis lorsque l'instruction est liée au composant pour la première fois, elle correspond à le hook de liaison. Enregistrez l'écouteur de défilement.

Les fonctions Hook sont des fonctions qui sont appelées lorsque le cycle de vie change. bind est appelé lorsqu'il est lié au composant pour la première fois, et unbind est appelé lorsque l'instruction n'est pas liée au composant.

Vous pouvez également remarquer que bind correspond à deux paramètres de la fonction, el et Binding. Ce sont des paramètres de fonction hook. Par exemple, el correspond au nœud lié qui contient beaucoup de données. comme ceux transmis à la commande Paramètres, etc.

Le el.clientHeight ci-dessous représente la hauteur du contenu du nœud qui obtient l'instruction de liaison.

Comme précédemment, déterminez si la hauteur de défilement plus la hauteur de la fenêtre est supérieure à la hauteur du contenu.

Liez la commande au nœud :

<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>

Copier après la connexion

Vous pouvez voir qu'une valeur est passée à la commande, et cette valeur est utilisé pour charger des données Fonction :

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

Copier après la connexion

Bien sûr, maintenant, lors du défilement vers le bas, seules les données de chargement seront imprimées. Il suffit de modifier cela pour appeler le. fonction et tout ira bien :

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

Copier après la connexion

Le loadMore de v-scroll="loadMore" peut être obtenu à partir de la liaison du paramètre de fonction hook.

À ce stade, une simple commande est terminée.

Optimisation

L'exemple ci-dessus n'obtient pas réellement les données de l'interface, il y a donc un bug caché : lorsque la réponse de l'interface est très lente, faites défiler jusqu'à la fin Lors du chargement des données, un léger défilement déclenchera toujours la fonction d'acquisition de données, ce qui provoquera plusieurs requêtes d'interface en même temps et renverra une grande quantité de données à la fois.

La solution consiste à ajouter une variable globale scrollDisable. Lorsque la fonction de chargement des données est déclenchée pour la première fois, définissez la valeur sur true et utilisez cette valeur pour déterminer si la fonction de chargement doit être exécutée.

Prenons l'exemple de la mise en œuvre commune :

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

Copier après la connexion

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile. à l'apprentissage de tous. Plus Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

À propos de l'introduction de la configuration de l'utilisation de Typescript dans Vue2 Vue-cli

À propos de la mise en œuvre du Framework de commentaires Vue (Implémentation du composant parent)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!