Vue.js 的移動端組件庫mint-ui實現(xiàn)無限滾動加載更多的方法

更新時間：2017年12月23日 08:44:01 作者：蓓蕾心晴

下面小編就為大家分享一篇Vue.js 的移動端組件庫mint-ui實現(xiàn)無限滾動加載更多的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

通過多次爬坑，發(fā)現(xiàn)了這些監(jiān)聽滾動來加載更多的組件的共同點，

因為這些加載更多的方法是綁定在需要加載更多的內(nèi)容的元素上的，

所以是進入頁面則直接觸發(fā)一次，當監(jiān)聽到滾動事件之后，繼續(xù)加載更多，

所以對于無限滾動加載不需要寫首次載入列表的函數(shù)，

代碼如下：

html:

//父組件
<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">
    發(fā)布于{{formatTime(item.createAt)}}
    &nbsp;&nbsp;&nbsp;&nbsp;
    {{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定時器，直接請求加載，當加載更多的時候可以加個定時器。

網(wǎng)上找到很多mint-ui 的loadmore組件來實現(xiàn)上拉加載更多，由于上拉觸發(fā)相應的加載更多事件，所以當進入頁面的時候應該不會自動載入數(shù)據(jù)，則這里可以加一個獲取第一頁數(shù)據(jù)的函數(shù)。

以上這篇Vue.js 的移動端組件庫mint-ui實現(xiàn)無限滾動加載更多的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: