需求：展示（用户）账户的明细，需要懒加载和下拉刷新效果（List实现懒加载，PullRefresh实现下拉刷新）
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() {
// 异步更新数据
setTimeout(() => {
this.getblancedetail()
// 加载状态结束
this.loading = false;
}, 500);
},
onRefresh () {
this.blancecurrengpage = 0
// this.pages = 1
this.userblansedatalist = []
// this.sendRequstForBuy()
setTimeout(() => {
this.userblansedatalist = []
this.isLoading = false
this.getblancedetail()
}, 300)
},
请求后台数据
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)
// 数据全部加载完成 停止懒加载
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;
}
}
)
总结：
1，List：在请求完后台所给的总条数，把finished设置为true；在调用接口的时候判断，如果已经显示完所有数据，就不调用接口；延迟的时间可以设置短一点，0.5s；offset属性，表示在距离底部多少像素的时候，开始加载数据；请求数据的页数，初始值为0；
2，PullRefresh：把请求的页码设置为0，需要遍历的数据设置为空,延迟的时间设置为0.2s
