Bibliothèque de composants mobiles Vue.js mint-Méthode pour implémenter le chargement infini en utilisant ui

Through many pitfalls, I found the common points of these components that load more by listening to the scroll event.

Because these methods to load more are bound to the elements that need to load more content.

Therefore, it is triggered once when entering the page, and then continue to load more after listening to the scroll event.

Therefore, for infinite scrolling loading, there is no need to write a function to load the initial list.

The code is as follows:

html:

//parent component
<div v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="1000">
   <LifeLists :loadingTextBtn="loadingTextBtn" :loadingText="loadingText" :loadingComplete="loadingComplete" :lifeList="lifeList"></LifeLists>
</div>
//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>
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">
    Publié le {{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:"En train de charger",
  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:"États-Unis",category:"",page:this.page,size:this.size});
   this.page++;
  }sinon que parseInt(this.page)>0 et 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:"États-Unis",category:"",page:this.page,size:this.size});
    this.page++;
   }, 1000);
  }else{
   this.loadingText="Tous les contenus ont été chargés";
   this.loadingComplete=true;
   this.loading = false;
  },
  },

Ce qui est important ici, c'est de juger, lorsque la page actuelle est 0, c'est-à-dire la première page, il n'est pas nécessaire d'utiliser un timer setTimeout, chargez directement, et lorsque vous chargez plus, vous pouvez ajouter un timer.

J'ai trouvé beaucoup de mint-Le composant loadmore de l'UI pour implémenter le chargement supplémentaire vers le bas, car un événement de chargement supplémentaire est déclenché par le glissement vers le bas, donc lorsque vous entrez dans la page, les données ne devraient pas être chargées automatiquement. Alors, vous pouvez ajouter une fonction pour obtenir les données de la première page.

La bibliothèque de composants mobiles Vue.js mentionnée ci-dessus, mint-La méthode d'implémentation de la défilement infini pour charger plus de contenu, que je partage avec vous aujourd'hui, est tout le contenu que j'ai partagé. J'espère que cela vous servira de référence et que vous soutiendrez également la tutorial de cri.

Déclaration : Le contenu de cet article est issu du réseau, propriété de ses auteurs respectifs, contribué et téléversé par les utilisateurs d'Internet. Ce site ne détient pas de droits de propriété, n'a pas été édité par des humains et n'assume aucune responsabilité juridique connexe. Si vous trouvez du contenu suspect de violation de droits d'auteur, veuillez envoyer un e-mail à : notice#oldtoolbag.com (veuillez remplacer # par @ lors de l'envoi d'un e-mail pour signaler une violation, et fournir des preuves pertinentes. Une fois vérifié, ce site supprimera immédiatement le contenu suspect de violation de droits d'auteur.)