À propos de la façon dont Vue.js implémente le chargement par défilement infini

Maintenant, je vais partager avec vous un article sur la bibliothèque de composants mobiles Vue.js mint-ui pour obtenir un défilement infini et charger plus de méthodes. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

Grâce à de nombreuses explorations de fosses, j'ai découvert le point commun de ces défilements de surveillance pour charger plus de composants,

Parce que ces méthodes de chargement supplémentaire sont liées à la nécessité de charger plus de contenu sur l'élément,

il est donc déclenché directement une fois lors de l'entrée dans la page. Après avoir surveillé l'événement de défilement, continuez à charger davantage,

il n'est donc pas nécessaire d'écrire la première liste de chargement pour un chargement de défilement infini. fonction,

le code est le suivant :

html:

//父组件
<p v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="1000">
   <LifeLists :loadingTextBtn="loadingTextBtn" :loadingText="loadingText" :loadingComplete="loadingComplete" :lifeList="lifeList"></LifeLists>
</p>
//LifeLists组件：
<LifeListItem :lists="lifeList"></LifeListItem>
  <p class="loading-text" v-show="{loadingTextBtn:true}">
   <span v-text="loadingText"></span>
   <mt-spinner v-if="(loadingComplete==false)" type="snake" :size="16"></mt-spinner>
</p>
LifeListItem组件：
<p id="lifeListItemBox">
<router-link v-for="(item,index) in lists" :to="{name:&#39;lifeDetails&#39;,params:{id:item.id}}" :key="index">
   <p class="lifeListItem1" v-if="(item.status==&#39;online&#39;)">
   <p v-if="(item.hasPrice==true)">
    <p class="title1">{{item.title}}</p>
    <p class="price">
    <b class="now"><span class="unit">{{item.monetaryUnit}}</span>{{item.price}}</b>
    </p>
   </p>
   <p v-else class="title2">{{item.title}}</p>
   <p class="info">
    发布于{{formatTime(item.createAt)}}
        
    {{item.countryName}} {{item.cityName}}
   </p>
   <p class="imageList">
    <img :src="img" alt="" v-for="(img,index) in item.photos">
   </p>
   <p class="content">{{item.detail}}</p>
   <p class="listBar">
    <p class="iconBox">
    <svg class="icon icon-dianzan" aria-hidden="true">
     <use xlink:href="#icon-dianzan" rel="external nofollow" ></use>
    </svg>
    {{item.like}}
    </p>
    <p class="iconBox">
    <svg class="icon icon-pinglun2" aria-hidden="true">
     <use xlink:href="#icon-pinglun2" rel="external nofollow" ></use>
    </svg>
    {{item.commentCount}}
    </p>
   </p>
   </p>
  </router-link>
</p>

vue.js

data:

page:0,
  size:10,
  loadingTextBtn:false,
  loadingText:"努力加载中",
  loadingComplete:false,
  refreshComplete:false,
  city:"",
  country:""

methods:

loadMore() {
  this.loading = true;
  this.loadingTextBtn=true;
  if(parseInt(this.page)==0){
   this.$store.dispatch('loadMoreLifeList',{city:"纽约",country:"美国",category:"",page:this.page,size:this.size});
   this.page++;
  }else if(parseInt(this.page)>0&&parseInt(this.page)<parseInt(this.totalPages)){
   setTimeout(() => {
 //   this.$store.dispatch(&#39;loadMoreLifeList&#39;,{city:this.city,country:this.country,category:"",page:this.page,size:this.size})
    this.$store.dispatch(&#39;loadMoreLifeList&#39;,{city:"纽约",country:"美国",category:"",page:this.page,size:this.size});
    this.page++;
   }, 1000);
  }else{
   this.loadingText="已全部加载完成";
   this.loadingComplete=true;
   this.loading = false;
  }
  },

L'important ici est de juger, lorsque la page actuelle est à 0, c'est-à-dire que lorsqu'une page est chargée, il n'est pas nécessaire d'utiliser un minuteur setTimeout et une demande directe de chargement est effectuée. Lorsque plusieurs pages sont chargées, un minuteur peut être ajouté.

J'ai trouvé de nombreux composants mint-ui loadmore sur Internet pour implémenter le pull-up pour charger davantage. Étant donné que le pull-up déclenche l'événement de chargement supplémentaire correspondant, les données ne doivent pas être automatiquement chargées lors de la saisie du fichier. page, donc ici Vous pouvez ajouter une fonction pour obtenir la première page de données.

Ce qui précède est le texte que j'ai compilé, j'espère qu'il sera utile à tout le monde

Articles connexes :

Problèmes concernant l'optimisation de la vitesse du webpack3 dans vue-cli

Expliquez en détail l'utilisation des abdos dans EasyUI

Comment implémenter des onglets interactifs dans zTree

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!