Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法

Dopo aver scavato più volte, ho scoperto i punti comuni di questi componenti che caricano di più tramite lo scorrimento,

Poiché questi metodi di caricamento in più sono associati agli elementi che devono caricare più contenuti,

Quindi viene chiamata direttamente quando si entra nella pagina, e quando si rileva l'evento di scorrimento, continua a caricare di più,

Quindi per il caricamento infinito non è necessario scrivere una funzione per il caricamento iniziale della lista,

Il codice è il seguente:

html:

//componente padre
<div v-infinite-scroll="caricaPiù" infinite-scroll-disabled="caricamentoInCorso" infinite-scroll-distance="1000">
   <LifeLists :loadingTextBtn="loadingTextBtn" :loadingText="loadingText" :loadingComplete="loadingComplete" :lifeList="lifeList"></LifeLists>
</div>
//Componente LifeLists:
<LifeListItem :lists="lifeList"></LifeListItem>
  <div class="loading-text" v-show="{loadingTextBtn:true}">
   <span v-text="loadingText"></span>
   <mt-spinner v-if="(loadingComplete==false)" type="snake" :size="16"></mt-spinner>
</div>
Componente LifeListItem:
<div id="lifeListItemBox">
<router-link v-for="(item,index) in lists" :to="{name:'lifeDetails',params:{id:item.id}}" :key="index">
   <div class="lifeListItem1" v-if="(item.status=='online')">
   <div v-if="(item.hasPrice==true)">
    <div class="title1">{{item.title}}</div>
    <div class="price">
    <b class="now"><span class="unit">{{item.monetaryUnit}}</span>{{item.price}}</b>
    </div>
   </div>
   <div v-else class="title2">{{item.title}}</div>
   <div class="info">
    Pubblicato il {{formatTime(item.createAt)}}
        
    {{item.countryName}} {{item.cityName}}
   </div>
   <div class="imageList">
    <img :src="img" alt="" v-for="(img,index) in item.photos">
   </div>
   <div class="content">{{item.detail}}</div>
   <div class="listBar">
    <div class="iconBox">
    <svg class="icon icon-dianzan" aria-hidden="true">
     <use xlink:href="#icon-dianzan" rel="external nofollow" ></use>
    </svg>
    {{item.like}}
    </div>
    <div class="iconBox">
    <svg class="icon icon-pinglun2" aria-hidden="true">
     <use xlink:href="#icon-pinglun2" rel="external nofollow" ></use>
    </svg>
    {{item.commentCount}}
    </div>
   </div>
   </div>
  </router-link>
</div>

vue.js

data:

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

methods:

loadMore() {
  this.loading = true;
  this.loadingTextBtn = true;
  if (parseInt(this.page) == 0) {
   this.$store.dispatch('loadMoreLifeList',{city:"New York",country:"Stati Uniti",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:"New York",country:"Stati Uniti",category:"",page:this.page,size:this.size});
    this.page++;
   }, 1000);
  }else{
   this.loadingText="Tutti i contenuti sono stati caricati completamente";
   this.loadingComplete=true;
   this.loading = false;
  }
  }

Ecco il punto importante: quando la pagina corrente è 0, ossia la prima pagina, non è necessario utilizzare il timer setTimeout, caricare direttamente, e quando si caricano più contenuti è possibile aggiungere un timer.

Trovare molti componenti loadmore di mint-ui su Internet per implementare il caricamento di più contenuti tramite scorrimento in alto, poiché lo scorrimento in alto scatena l'evento di caricamento di più contenuti, quindi non dovrebbe caricare automaticamente i dati quando si entra nella pagina, quindi è possibile aggiungere una funzione di recupero dei dati della prima pagina qui.

La guida completa di implementazione del componente mobile di Vue.js mint-ui per la funzione di scorrimento infinito e caricamento di più contenuti che il curatore ha condiviso con tutti è tutto. Spero che questo possa fornire una参考 per tutti, e spero che tutti possano sostenere la guida urla.

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, il diritto d'autore spetta al proprietario originale, il contenuto è stato caricato autonomamente dagli utenti di Internet, questo sito non detiene i diritti di proprietà, non è stato editato manualmente e non assume alcuna responsabilità legale correlata. Se trovi contenuti sospetti di violazione del copyright, invia un'e-mail a notice#oldtoolbag.com (sostituisci # con @ durante l'invio dell'e-mail) per segnalare, fornendo prove pertinenti. Una volta verificata, questo sito eliminerà immediatamente i contenuti sospetti di violazione del copyright.