Wie mint-ui die Ladefunktion für unendliches Scrollen implementiert

Dieses Mal zeige ich Ihnen, wie mint-ui die Funktion zum unendlichen Scrollen implementiert. Was sind die Vorsichtsmaßnahmen für mint-ui, um die Funktion zum unendlichen Scrollen zu implementieren? Fall. Schauen wir uns das einmal an.

Nachdem ich die Grube viele Male erklommen hatte, entdeckte ich die Gemeinsamkeit dieser Überwachung, indem ich scrollte, um mehr Komponenten zu laden,

Da diese Methoden zum Laden weiterer Elemente an Elemente gebunden sind, die mehr Inhalte laden müssen,

Wenn Sie also die Seite betreten, wird sie sofort ausgelöst. Wenn das Scroll--Ereignis erkannt wird, laden Sie weiter,

Für das unendliche Scrollen ist es also nicht erforderlich, die -Funktion ,

der ersten Ladeliste zu schreiben Der Code lautet wie folgt:

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

Daten:

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

Methoden:

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

Hier ist es wichtig zu beurteilen, dass es nicht erforderlich ist, TimeoutTimer festzulegen und das Laden direkt anzufordern, wenn die aktuelle Seite 0 ist, also die erste Seite hinzugefügt.

Ich habe im Internet viele Mint-UI-Loadmore-Komponenten gefunden, um Pull-up zu implementieren, um mehr zu laden. Da Pull-up das entsprechende Load-More-Ereignis auslöst, sollten die Daten beim Aufrufen der Seite nicht automatisch geladen werden, sodass Sie eine hinzufügen können Hier erhalten Sie die erste Seitendatenfunktion.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Angular implementiert Tabellenfilter- und Löschfunktionen

Der einfachste Weg, die Taschenrechnerfunktion in JS zu implementieren

Das obige ist der detaillierte Inhalt vonWie mint-ui die Ladefunktion für unendliches Scrollen implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!