À propos de la façon dont Vue.js implémente le chargement par défilement infini-js tutoriel-php.cn

À propos de la façon dont Vue.js implémente le chargement par défilement infini

亚连

Libérer： 2018-06-15 23:20:55

original

1670 Les gens l'ont consulté

Maintenant, je vais partager avec vous un article sur la bibliothèque de composants mobiles Vue.js mint-ui pour obtenir un défilement infini et charger plus de méthodes. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

Grâce à de nombreuses explorations de fosses, j'ai découvert le point commun de ces défilements de surveillance pour charger plus de composants,

Parce que ces méthodes de chargement supplémentaire sont liées à la nécessité de charger plus de contenu sur l'élément,

il est donc déclenché directement une fois lors de l'entrée dans la page. Après avoir surveillé l'événement de défilement, continuez à charger davantage,

il n'est donc pas nécessaire d'écrire la première liste de chargement pour un chargement de défilement infini. fonction,

le code est le suivant :

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>

Copier après la connexion

vue.js

data:

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

Copier après la connexion

methods:

loadMore() {
  this.loading = true;
  this.loadingTextBtn=true;
  if(parseInt(this.page)==0){
   this.$store.dispatch(&#39;loadMoreLifeList&#39;,{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;
  }
  },

Copier après la connexion

L'important ici est de juger, lorsque la page actuelle est à 0, c'est-à-dire que lorsqu'une page est chargée, il n'est pas nécessaire d'utiliser un minuteur setTimeout et une demande directe de chargement est effectuée. Lorsque plusieurs pages sont chargées, un minuteur peut être ajouté.

J'ai trouvé de nombreux composants mint-ui loadmore sur Internet pour implémenter le pull-up pour charger davantage. Étant donné que le pull-up déclenche l'événement de chargement supplémentaire correspondant, les données ne doivent pas être automatiquement chargées lors de la saisie du fichier. page, donc ici Vous pouvez ajouter une fonction pour obtenir la première page de données.

Ce qui précède est le texte que j'ai compilé, j'espère qu'il sera utile à tout le monde