php 無限滾動加載,有關Vue.js如何實作無限滾動加載

下面我就為大家分享一篇Vue.js 的移動端元件庫mint-ui實作無限滾動加載更多的方法，具有很好的參考價值，希望對大家有所幫助。

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

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

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

是以對于無限滾動加載不需要寫首次載入清單的函數，

代碼如下：

html://父元件

//LifeLists元件：

LifeListItem元件：

{{item.title}}

{{item.monetaryUnit}}{{item.price}}

{{item.title}}

釋出于{{formatTime(item.createAt)}}

{{item.countryName}} {{item.cityName}}

{{item.detail}}

{{item.like}}

{{item.commentCount}}

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)

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元件來實作上拉加載更多，由于上拉觸發相應的加載更多事件，是以當進入頁面的時候應該不會自動載入資料，則這裡可以加一個擷取第一頁資料的函數。

以上就是我整理的文字，希望對大家有幫助

相關文章: