Biblioteca de componentes móviles de Vue.js: mint-Métodos para implementar la carga infinita de más elementos en ui

Después de mucho trabajo, se descubrió el punto común de estos componentes que escuchan el desplazamiento para cargar más.

Porque estos métodos de carga adicional están vinculados a los elementos que necesitan más contenido.

Por lo tanto, al entrar en la página se dispara una vez, y cuando se detecta el evento de desplazamiento, se carga más.

Por lo tanto, para el carga infinita no es necesario escribir una función de carga inicial de la lista.

El código es el siguiente:

html:

//padre componente
<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">
    发布于{{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:"Nueva York",country:"Estados Unidos",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:"Nueva York",country:"Estados Unidos",category:"",page:this.page,size:this.size});
    this.page++;
   } 1000);
  }else{
   this.loadingText="Carga completa";
   this.loadingComplete=true;
   this.loading = false;
  }
  }

Lo importante aquí es la evaluación, cuando la página actual es 0, es decir, la primera página, no se necesita el temporizador setTimeout, se puede cargar directamente, al cargar más se puede agregar un temporizador.

Se han encontrado muchos mint-ui con el componente de loadmore para implementar la carga más, ya que el arrastre desencadena el evento de carga más, por lo que cuando ingrese a la página no debería cargar datos automáticamente, por lo que aquí se puede agregar una función para obtener los datos de la primera página.

La biblioteca de componentes móviles de Vue.js que se menciona a continuación es mint-La manera de implementar la carga infinita en ui que comparto con todos ustedes es todo el contenido que tengo, espero que les sirva de referencia y que apoyen y alaben más a la tutorial.

Declaración: El contenido de este artículo se ha obtenido de la red, es propiedad del autor original, el contenido se ha contribuido y subido por los usuarios de Internet de manera autónoma, este sitio no posee los derechos de propiedad, no ha sido editado por humanos y no asume ninguna responsabilidad legal. Si encuentra contenido sospechoso de infracción de derechos de autor, le invitamos a enviar un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @) para denunciar y proporcionar evidencia relevante. Una vez confirmado, este sitio eliminará inmediatamente el contenido sospechoso de infracción.