Explication détaillée de la bibliothèque de composants mobiles de Vue.js, mint-ui, pour obtenir un chargement par défilement infini.

Grâce à de nombreuses fosses d'exploration, j'ai découvert que ces méthodes d'écoute de défilement pour charger plus de composants ont quelque chose en commun. Parce que ces méthodes de chargement de plus de composants sont liées à des éléments qui doivent charger plus de contenu, elles entrent ensuite dans la page. il est déclenché une fois directement, et une fois l'événement de défilement surveillé, il continue à charger davantage, il n'est donc pas nécessaire d'écrire une fonction pour la première liste de chargement pour un chargement de défilement infini. Cet article partagera 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. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

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>

vue.js

données :

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

méthodes :

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;
  }
  },

L'important ici est de juger Lorsque la page actuelle est à 0, c'est-à-dire la première page, il n'est pas nécessaire d'avoir un timer setTimeout et une demande directe de chargement. chargé, une minuterie peut être ajoutée.

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.

Recommandations associées :

Explication détaillée du JS natif pour contrôler plusieurs barres de défilement afin de suivre le défilement de manière synchrone

Comment implémentez-le dans vue Faites défiler pour charger plus de fonctions

Explication détaillée de CSS3 pour obtenir un défilement transparent en boucle infinie

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!