vant实现上拉刷新,下拉加载
程序员文章站
2022-03-16 14:15:39
...
vant实现上拉刷新,下拉加载
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
</van-list>
</van-pull-refresh>
data() {
return {
loading: false,
finished: false,
refreshing: false,
pageNum: 1,
pageSize: 10,
// 注意如果设置一次显示的量比较小,第一次加载时如果铺不满全屏,还会再次触发去请求第二页的数据
serviceList: [],
filters: {},
},
methods: {
onRefresh(msg) {
// 清空列表数据
this.finished = false;
// 重新加载数据
this.loading = true;
this.pageNum = 1;
this.onLoad();
},
// 获取全部订单数据
onLoad() {
if (this.refreshing) {
this.serviceList = [];
this.refreshing = false;
}
let params = Object.assign({}, this.filters);
params.pageNum = this.pageNum;
params.pageSize = this.pageSize;
pageApi.orderProgressFindList(params).then(
result => {
if (result) {
if (result.total >= 10) {
let list = result.data;
let total = 0;
if ((list.total * 1) % 10 == 0) {
total = (result.total * 1) / 10;
} else {
total = parseInt((result.total * 1) / 10) + 1;
}
if (this.pageNum > 1) {
this.serviceList = [...this.serviceList, ...list];
} else {
this.serviceList = list;
}
// 如果当前页数 = 总页数,则已经没有数据
if (this.pageNum === total) {
this.finished = true;
this.finishedText = "- 没有更多了-";
}
// 如果总页数大于当前页码,页码+1
if (total > this.pageNum) {
this.pageNum++;
this.loading = false;
}
} else {
this.serviceList = result.data;
this.finished = true;
this.finishedText = "- 没有更多了-";
}
}
},
function(err) {}
);
},
// 调用
closeSearchPop() {
this.pageNum = 1;
this.onRefresh();
}
}
上一篇: php连接access数据库实现代码
推荐阅读
-
jquery使用iscorll实现手机端中上拉加载下拉刷新
-
Diycode开源项目实例搭建上拉加载和下拉刷新的Fragment
-
XListView实现网络加载图片和下拉刷新
-
在React中使用Native如何实现自定义下拉刷新上拉加载的列表
-
Android下拉刷新上拉加载更多左滑动删除
-
iOS实现scrollview上拉显示Navbar下拉隐藏功能详解
-
Android RecyclerView上拉加载和下拉刷新
-
Android RecyclerView上拉加载和下拉刷新(基础版)
-
iOS实现MJRefresh下拉刷新(上拉加载)使用详解
-
ios基于MJRefresh实现上拉刷新和下拉加载动画效果