Comment mint-ui implémente la fonction de chargement par défilement infini

Cette fois, je vais vous montrer comment mint-ui implémente la fonction de chargement par défilement infini. Quelles sont les précautions pour que mint-ui implémente la fonction de chargement par défilement infini. cas. Jetons un coup d'oeil une fois.

Après avoir escaladé la fosse à plusieurs reprises, j'ai découvert le point commun de ces monitoring scrolling pour charger plus de composants,

Parce que ces méthodes de chargement supplémentaire sont liées aux éléments qui doivent charger plus de contenu,

Ainsi, lorsque vous entrez dans la page, elle sera déclenchée directement une fois. Lorsque l'événement de défilement est détecté, continuez à en charger davantage,

. Donc pour un chargement par défilement infini, il n'est pas nécessaire d'écrire la fonction ,

de la première liste de chargement 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

données :

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

méthodes :

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('loadMoreLifeList',{city:this.city,country:this.country,category:"",page:this.page,size:this.size})
    this.$store.dispatch('loadMoreLifeList',{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 que lorsque la page actuelle est 0, c'est-à-dire la première page, il n'est pas nécessaire de setTimeoutTimer et de demander directement le chargement. Lorsque plusieurs charges sont chargées, une minuterie peut être activée. 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 l'entrée dans la page, vous pouvez donc les ajouter. un ici pour obtenir la première fonction de données de page.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Angular implémente des fonctions de filtrage et de suppression de tables

Le moyen le plus simple d'implémenter la fonction de calculatrice en JS

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!