记录使用vant–list的下拉刷新以及分页功能
vant链接.
首先是分页,需要根据page,limit来获取数据,使用vant的代码做示范:
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<van-cell v-for="item in list" :key="item" :title="item" />
</van-list>
</van-pull-refresh>
<van-pull-refresh>
是下拉刷新,<van-list>
是分页显示
refreshing:是否展示刷新状态
loading:是否展示加载状态
finished:是否已加载完成,加载完成后不再触发load事件
data() {
return {
page: 1,
limit: 10,
list: [],
loading: false,
finished: false,
refreshing: false,
}
},
methods: {
onLoad() {
var params = {
page: this.page++,
limit: this.limit
}
getEmployeesIncomeByYearMonth(params).then(res => {
var newList = res.list
if (res.code === 0 && res.success) {
if (this.refreshing) {
this.list = [];
this.refreshing = false;
}
for (let i = 0; i < newList.length; i++) {
this.list.push(newList[i]);
}
this.loading = false;
if (this.list.length >= res.total) {
this.finished = true;
}
}
})
},
onRefresh() {
// 清空列表数据
this.finished = false;
// 重新加载数据
// 将 loading 设置为 true,表示处于加载状态
this.loading = true;
this.page = 1
this.onLoad();
},
},
// 生命周期 - 创建完成(可以访问当前this实例)
created() {
this.onLoad()
},
基于vant的示例代码改造,onLoad用于获取list,第一次访问page为1,之后每次访问加1,下拉刷新的时候重新赋值page为1