通過多次爬坑，發現了這些監聽滾動來加載更多的組件的共同點，

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

所以是進入頁面則直接觸發一次，當監聽到滾動事件之后，繼續加載更多，

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

代碼如下：

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">    發布于{{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;  }  },