Mobile Komponentenbibliothek mint von Vue.js-Methode zur Implementierung des Endlosen ROLLINGS und der Ladevorgänge

Durch mehrfache Auffindung von Fehlern wurde die Gemeinsamkeit dieser Komponenten, die durch das Rollen hören, zum Laden von mehr entdeckt.

Weil diese Methoden zum Laden von mehr sind, die an den Elementen gebunden sind, die mehr laden müssen.

Daher wird beim Betreten der Seite direkt einmalig ausgelöst, und wenn nach dem Empfang des Rollenevents weiter geladen wird.

Daher ist es nicht notwendig, eine Funktion zum Laden der Liste beim ersten Laden zu schreiben, für das unendliche Rollen.

Der Code sieht so aus：

html:

//Elternkomponente
<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-Komponente：
<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-Komponente：
<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: "纽约", 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;
  }
  }

这里重要的是判断，当当前页面为 0 时，即第一页时，不需要 setTimeout 定时器，直接请求加载。当加载更多时可以添加一个定时器。

网上找到很多 mint-UI 的 loadmore 组件来实现上拉加载更多，由于上拉触发相应的加载更多事件，所以当进入页面的时候应该不会自动加载数据，因此这里可以添加一个获取第一页数据的函数。

以上这篇 Vue.js 的移动端组件库 mint-UI 实现无限滚动加载更多的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持呐喊教程。

声明：本文内容来自网络，版权归原作者所有。内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#oldtoolbag.com（在发邮件时，请将#更换为@）进行举报，并提供相关证据。一经查实，本站将立即删除涉嫌侵权内容。