透過多次爬坑，發現了這些監聽滾動來加載更多的組件的共同點，因為這些加載更多的方法是綁定在需要加載更多的內容的元素上的，所以是進入頁面則直接觸發一次，當監聽到滾動事件之後，繼續加載更多，所以對於無限滾動加載不需要寫首次載入列表的函數。本文就為大家分享一篇Vue.js 的行動裝置元件庫mint-ui實現無限滾動載入更多的方法，具有很好的參考價值，希望對大家有所幫助。一起跟著小編過來看看吧，希望能幫助大家。
程式碼如下：
html:
//父组件
<p v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="1000">
<LifeLists :loadingTextBtn="loadingTextBtn" :loadingText="loadingText" :loadingComplete="loadingComplete" :lifeList="lifeList"></LifeLists>
</p>
//LifeLists组件：
<LifeListItem :lists="lifeList"></LifeListItem>
<p class="loading-text" v-show="{loadingTextBtn:true}">
<span v-text="loadingText"></span>
<mt-spinner v-if="(loadingComplete==false)" type="snake" :size="16"></mt-spinner>
</p>
LifeListItem组件：
<p id="lifeListItemBox">
<router-link v-for="(item,index) in lists" :to="{name:'lifeDetails',params:{id:item.id}}" :key="index">
<p class="lifeListItem1" v-if="(item.status=='online')">
<p v-if="(item.hasPrice==true)">
<p class="title1">{{item.title}}</p>
<p class="price">
<b class="now"><span class="unit">{{item.monetaryUnit}}</span>{{item.price}}</b>
</p>
</p>
<p v-else class="title2">{{item.title}}</p>
<p class="info">
发布于{{formatTime(item.createAt)}}
{{item.countryName}} {{item.cityName}}
</p>
<p class="imageList">
<img :src="img" alt="" v-for="(img,index) in item.photos">
</p>
<p class="content">{{item.detail}}</p>
<p class="listBar">
<p class="iconBox">
<svg class="icon icon-dianzan" aria-hidden="true">
<use xlink:href="#icon-dianzan" rel="external nofollow" ></use>
</svg>
{{item.like}}
</p>
<p class="iconBox">
<svg class="icon icon-pinglun2" aria-hidden="true">
<use xlink:href="#icon-pinglun2" rel="external nofollow" ></use>
</svg>
{{item.commentCount}}
</p>
</p>
</p>
</router-link>
</p>登入後複製
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元件來實現上拉加載更多，由於上拉觸發相應的加載更多事件，所以當進入頁面的時候應該不會自動載入數據，則這裡可以增加一個取得第一頁資料的函數。
相關推薦：
詳解原生JS是實現控制多個滾動條同步跟隨滾動
vue中如何實現滾動載入更多的功能
詳解CSS3實現無限循環的無縫滾動
以上是詳解Vue.js 的行動端元件庫mint-ui實作無限滾動載入更多的詳細內容。更多資訊請關注PHP中文網其他相關文章！
