关于van-pull-refresh与van-list一起用的问题（稳定实践）
point
- 滚动到底部，不请求分页数据？查看是否正确设置
finished值 - 正确设置
finished值，请求分页也正常，但还是会出现刚加载页面的时候多次调用van-list的load方法，请求完了所有数据？设置:immediate-check="false"就ok
// html
:immediate-check="false"
finished-text="没有更多了"
@load="onLoad"<--- 这个是我自己封装的自定义组件 --->
// js
created() {
this.onLoad();
// 因为设置了immediate-check="false"所以加载完页面后要手动调用第一次的onLoad方法
},
onRefresh() {
// 清空列表数据
this.finished = false;
// 重置分页
this.pageParams.pageNo = 0;
this.pageParams.pageSize = 10;
// 重置列表
this.records = [];
// 重新加载数据
// 将 loading 设置为 true，表示处于加载状态
this.loading = true;
this.onLoad();
},
async onLoad() {
if (this.refreshing) {
this.refreshing = false;
}this.pageParams.pageNo++;
await this.queryTaskOrderList();
this.loading = false;
},
async queryTaskOrderList() {
try {
const params = {
...this.pageParams,
};
const apiName = "nptTaskPageByCurrentUser";
const {
data: { records, total },
} = await api.req(params, apiName);
this.records = this.records.concat(records);
// 这里要改变list
this.finished = this.records.length >= total // 就是这里！当请求完所有数据的时候才设置finished为true，否则为false
} catch (error) {
console.log("获取任务工单列表失败", error);
this.finished = true // 还有这里！出错的时候要设置为true，不然也会一直请求
}
},推荐阅读
- JAVA（抽象类与接口的区别&重载与重写&内存泄漏）
- Docker应用:容器间通信与Mariadb数据库主从复制
- 《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量
- 第326天
- Shell-Bash变量与运算符
- 关于QueryWrapper|关于QueryWrapper,实现MybatisPlus多表关联查询方式
- 四首关于旅行记忆的外文歌曲
- 逻辑回归的理解与python示例
- 醒不来的梦
- Guava|Guava RateLimiter与限流算法