point
- 滚动到底部，不请求分页数据？查看是否正确设置
finished值 - 正确设置
finished值，请求分页也失常，但还是会呈现刚加载页面的时候屡次调用van-list的load办法，申请完了所有数据？设置:immediate-check="false"就ok
实际与讲解
// html<van-pull-refresh v-model="refreshing" @refresh="onRefresh"> <van-list class="order-list" v-model="loading" :finished="finished" <--- 这个能够解决正确设置finished后还是会一次性申请完所有数据的问题 ---> :immediate-check="false" finished-text="没有更多了" @load="onLoad"<--- 这个是我本人封装的自定义组件 ---> <order-card v-for="item in records" :key="item.id + item.no" :record="item" @click.native="goTo(item)" ></order-card> </van-list></van-pull-refresh>// jscreated() { 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，不然也会始终申请 }},