Informationen dazu, wie Vue.js das Laden unendlicher Scrollvorgänge implementiert

Jetzt werde ich einen Artikel über die mobile Komponentenbibliothek mint-ui von Vue.js teilen, um unendliches Scrollen und Laden weiterer Methoden zu erreichen. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich sein wird.

Durch viele Pit-Crawls habe ich die Gemeinsamkeit dieser Überwachungsscrollen entdeckt, um mehr Komponenten zu laden,

Da diese Methoden zum Laden mehr mit der Notwendigkeit verbunden sind, mehr Inhalte auf das Element zu laden,

damit es direkt beim Betreten der Seite ausgelöst wird. Laden Sie nach der Überwachung des Scroll-Ereignisses weiter,

sodass keine Notwendigkeit besteht, die erste Ladeliste für das unendliche Scrollen zu schreiben. Die Funktion

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(&#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;
  }
  },

Hier ist es wichtig zu beurteilen, dass die aktuelle Seite 0 ist, also die erste Seite, nein Ein setTimeout-Timer ist erforderlich, um das Laden direkt anzufordern. Wenn mehr geladen wird, 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 Pull-up das entsprechende Load-More-Ereignis auslöst, sollten die Daten beim Aufrufen der Seite nicht automatisch geladen werden , also hier Sie können eine Funktion hinzufügen, um die erste Seite mit Daten abzurufen.

Das Obige ist der Text, den ich zusammengestellt habe, ich hoffe, er wird für alle hilfreich sein

Verwandte Artikel:

Probleme zur Webpack3-Geschwindigkeitsoptimierung in vue-cli

Erklären Sie ausführlich die Verwendung von Bauchmuskeln in EasyUI

So implementieren Sie interaktive Registerkarten in zTree

Das obige ist der detaillierte Inhalt vonInformationen dazu, wie Vue.js das Laden unendlicher Scrollvorgänge implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!