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

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

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

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

代碼如下：

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"></use></svg>{{item.like}}</div><div class="iconBox"><svg class="icon icon-pinglun2" aria-hidden="true"><use xlink:href="#icon-pinglun2"></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組件來實現上拉加載更多，由于上拉觸發相應的加載更多事件，所以當進入頁面的時候應該不會自動載入數據，則這里可以加一個獲取第一頁數據的函數。

原文地址：https://segmentfault.com/a/1190000012547514

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。