摘要：網(wǎng)上找到很多的組件來實(shí)現(xiàn)上拉加載更多，由于上拉觸發(fā)相應(yīng)的加載更多事件，所以當(dāng)進(jìn)入頁面的時候應(yīng)該不會自動載入數(shù)據(jù)，則這里可以加一個獲取第一頁數(shù)據(jù)的函數(shù)。
通過多次爬坑，發(fā)現(xiàn)了這些監(jiān)聽滾動來加載更多的組件的共同點(diǎn)，
因?yàn)檫@些加載更多的方法是綁定在需要加載更多的內(nèi)容的元素上的，
所以是進(jìn)入頁面則直接觸發(fā)一次，當(dāng)監(jiān)聽到滾動事件之后，繼續(xù)加載更多，
所以對于無限滾動加載不需要寫首次載入列表的函數(shù)，
代碼如下：
html:
//父組件
//LifeLists組件：
//LifeListItem組件：
{{item.title}}
{{item.monetaryUnit}}{{item.price}}
{{item.title}}
發(fā)布于{{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;
}
},
這里重要的是判斷，當(dāng)當(dāng)前頁面為0的時候，即第一頁的時候，不需要setTimeout定時器，直接請求加載，當(dāng)加載更多的時候可以加個定時器。
網(wǎng)上找到很多mint-ui 的loadmore組件來實(shí)現(xiàn)上拉加載更多，由于上拉觸發(fā)相應(yīng)的加載更多事件，所以當(dāng)進(jìn)入頁面的時候應(yīng)該不會自動載入數(shù)據(jù)，則這里可以加一個獲取第一頁數(shù)據(jù)的函數(shù)。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90350.html
