Detaillierte Erläuterung der Mint-UI-Bibliothek für mobile Komponenten von Vue.js, um ein unendliches Scrollen beim Laden zu ermöglichen

Durch viele Crawling-Pits habe ich herausgefunden, dass diese Methoden zum Laden weiterer Komponenten etwas gemeinsam haben, da diese Methoden zum Laden weiterer Komponenten an Elemente gebunden sind, die mehr Inhalte laden müssen Es wird einmal direkt ausgelöst und nach der Überwachung des Scroll-Ereignisses wird weiterhin mehr geladen, sodass für das unendliche Scroll-Laden keine Funktion für die erste Ladeliste geschrieben werden muss. In diesem Artikel stellen wir Ihnen einen Artikel über die mobile Komponentenbibliothek mint-ui von Vue.js vor, um unendliches Scrollen und Laden weiterer Methoden zu ermöglichen. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich ist. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

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 kein setTimeout-Timer und keine direkte Anforderung zum Laden erforderlich sind, wenn die aktuelle Seite 0 ist geladen ist, kann ein Timer hinzugefügt werden.

Ich habe im Internet viele Mint-UI-Loadmore-Komponenten gefunden, um Pull-Up zu implementieren, um mehr zu laden. Da das Pull-Up das entsprechende Load-More-Ereignis auslöst, sollten die Daten beim Betreten nicht automatisch geladen werden Seite, also hier Sie können eine Funktion hinzufügen, um die erste Seite mit Daten abzurufen.

Verwandte Empfehlungen:

Detaillierte Erklärung von nativem JS zur Steuerung mehrerer Bildlaufleisten, um dem Scrollen synchron zu folgen

Anleitung Implementieren Sie es in Vue Scrollen, um weitere Funktionen zu laden

Detaillierte Erklärung von CSS3, um ein nahtloses Scrollen mit Endlosschleife zu erreichen

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Mint-UI-Bibliothek für mobile Komponenten von Vue.js, um ein unendliches Scrollen beim Laden zu ermöglichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!