摘要：網上找到很多的組件來實現上拉加載更多，由于上拉觸發相應的加載更多事件，所以當進入頁面的時候應該不會自動載入數據，則這里可以加一個獲取第一頁數據的函數。
通過多次爬坑，發現了這些監聽滾動來加載更多的組件的共同點，
因為這些加載更多的方法是綁定在需要加載更多的內容的元素上的，
所以是進入頁面則直接觸發一次，當監聽到滾動事件之后，繼續加載更多，
所以對于無限滾動加載不需要寫首次載入列表的函數，
代碼如下：
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) {
// 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組件來實現上拉加載更多，由于上拉觸發相應的加載更多事件，所以當進入頁面的時候應該不會自動載入數據，則這里可以加一個獲取第一頁數據的函數。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90350.html
