需求：展示（用戶）賬戶的明細洪燥，需要懶加載和下拉刷新效果（List實現(xiàn)懶加載妥曲，PullRefresh實現(xiàn)下拉刷新）
html:
<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
<van-list
v-model="loading"
:offset="300"
:finished="finished"
@load="onLoad"
>
<div class="blancetransation-alldetail-items" v-for='(item,index) in userblansedatalist'>
<div class="blancetransation-alldetail-items-left">
<div class="blancetr transaclianbei1" v-if="item.status">收</div>
<div class="blancetr transaclianbei2" v-else>支</div>
<div class="blance-center-div">
<p class="blancetransation-expenditure">{{item.desc}}</p>
<p class="blancetransation-time">{{item.time}}</p>
</div>
</div>
<div class="blancetransation-alldetail-items-right">
<p class="blancetransation-amount">
<span v-if="item.status" style="color:#F74C4C">+{{item.amount}}元</span>
<span v-else style="color:#7CAAFF">-{{item.amount}}元</span>
</p>
</div>
</div>
</van-list>
</van-pull-refresh>
js
onLoad() {
// 異步更新數(shù)據(jù)
setTimeout(() => {
this.getblancedetail()
// 加載狀態(tài)結(jié)束
this.loading = false;
}, 500);
},
onRefresh () {
this.blancecurrengpage = 0
// this.pages = 1
this.userblansedatalist = []
// this.sendRequstForBuy()
setTimeout(() => {
this.userblansedatalist = []
this.isLoading = false
this.getblancedetail()
}, 300)
},
請求后臺數(shù)據(jù)
if (this.blancecurrengpage!=0 && this.blancecurrengpage*7>=this.userblansedata.listCount) {
return
}
this.blancecurrengpage = this.blancecurrengpage + 1
this.postJsonRequest('/*******/api/json', {
'method': '*****',
'data':{
"currPage":this.blancecurrengpage,
"pageSize":7
}
}).then(respond => {
console.log(respond)
if (respond.status === 200) {
if (respond.data.code === 200) {
this.userblansedata = respond.data.result
// this.userblansedatalist = respond.data.result.detailList
this.userblansedatalist = this.userblansedatalist.concat(respond.data.result.detailList)
console.log(this.userblansedatalist)
// 數(shù)據(jù)全部加載完成 停止懶加載
console.log(this.userblansedata.listCount)
if (this.blancecurrengpage*7>=this.userblansedata.listCount) {
this.finished = true;
console.log('加載完成')
}
} else {
console.log(respond.data.message)
this.finished = true;
}
}else{
console.log(respond.code)
this.finished = true;
}
}
)
總結(jié)：
1守谓，List：在請求完后臺所給的總條數(shù)瞎抛，把finished設(shè)置為true墙贱；在調(diào)用接口的時候判斷热芹，如果已經(jīng)顯示完所有數(shù)據(jù)，就不調(diào)用接口惨撇；延遲的時間可以設(shè)置短一點伊脓，0.5s；offset屬性魁衙，表示在距離底部多少像素的時候报腔，開始加載數(shù)據(jù)；請求數(shù)據(jù)的頁數(shù)剖淀，初始值為0纯蛾；
2，PullRefresh：把請求的頁碼設(shè)置為0纵隔，需要遍歷的數(shù)據(jù)設(shè)置為空,延遲的時間設(shè)置為0.2s
