Heim > Web-Frontend > js-Tutorial > Wie mint-ui die Ladefunktion für unendliches Scrollen implementiert

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

php中世界最好的语言
Freigeben: 2018-04-13 17:13:07
Original
3128 Leute haben es durchsucht

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>
Nach dem Login kopieren

vue.js

Daten:

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

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;
  }
  },
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage