van-list van-pull-refresh实现上拉加载，下拉刷新_vant上拉加载

背景：在移动端项目开发中有列表页面开发，需要实现上拉加载下一页数据，下拉刷新页面。
Vant 是一个轻量、可靠的移动端组件库，使用该框架的van-list组件和van-pull-refresh组件可实现上述功能

van-list组件：瀑布流滚动加载，用于展示长列表，当列表即将滚动到底部时，会触发事件并加载更多列表项。用该组件可实现上拉加载
List 组件通过 loading 和 finished 两个变量控制加载状态，当组件滚动到底部时，会触发 load 事件并将 loading 设置成 true。此时可以发起异步操作并更新数据，数据更新完毕后，将 loading 设置成 false 即可。若数据已全部加载完毕，则直接将 finished 设置成 true 即可

<van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
  <van-cell v-for="item in list" :key="item" :title="item" />
</van-list>
1
2
3
4
5
6
7
8

onLoad() {
   // 异步更新数据
   // setTimeout 仅做示例，真实场景中一般为 ajax 请求
   setTimeout(() => {
     for (let i = 0; i < 10; i++) {
       this.list.push(this.list.length + 1);
     }
     // 加载状态结束
     this.loading = false;
     // 数据全部加载完成
     if (this.list.length >= 40) {
       this.finished = true;
     }
   }, 1000);
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

van-pull-refresh组件：下拉刷新时会触发 refresh 事件，在事件的回调函数中可以进行同步或异步操作，操作完成后将 v-model 设置为 false，表示加载完成。

<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
  <p>刷新次数: {{ count }}</p>
</van-pull-refresh>
1
2
3

onRefresh() {
   setTimeout(() => {
     Toast('刷新成功');
     this.isLoading = false;
     this.count++;
   }, 1000);
 }
1
2
3
4
5
6
7

实际项目案例：

<van-pull-refresh
   v-model="refreshing"
   @refresh="onRefresh"
   v-if="list.length"
 >
   <van-list
     v-model="loading"
     :finished="finished"
     finished-text="没有更多了"
     @load="onLoad"
   >
     <div
       class="my-integral-item"
       v-for="(item, index) in list"
       :key="index"
       @click="messageClick(item)"
     >
       <div class="top-time-box">{{ item.createTime }}</div>
       <div class="my-integral-box">
         <div class="main-title">
           <div class="left-red-icon" v-if="!item.readFlag"></div>
           <div class="rightcontent">
             测试数据
           </div>
         </div>
         <div class="content-panel">
           {{ item.text }}
         </div>
         <div class="ope-panel">
           <div class="sub-title">测试数据</div>
           <div class="go-detail">查看详情></div>
         </div>
       </div>
     </div>
   </van-list>
 </van-pull-refresh>
 <div v-else>
   <van-empty description="暂无数据" />
 </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

data中定义数据

loading: false, // 是否处于加载状态
 finished: false, // 是否加载完成
 list: [], // 数据列表
 refreshing: false, // 当前是否刷新重置信息
 pageParams: {
   start: 0,
   limit: 5
 }
1
2
3
4
5
6
7
8

关键点在于上拉加载时要调用查询方法请求数据，下拉刷新时要先重置请求参数并调用查询方法请求数据。调用查询方法请求到数据后，将当前请求到的第二页数据合并到已有数据中，并且将加载状态loading 置为false。然后将当前请求到的数据长度list.length与请求参数中每页长度pageParams.limit做对比，如果list.length小于pageParams.limit，则将finished设置为true，此时页面底部显示finished-text没有更多了，表示加载完所有数据；否则将请求参数pageParams.start增加pageParams.limit（代表请求第二页数据，开发中按实际数据接口调整参数）

onLoad() {
  if (this.refreshing) {
    this.list = [];
    this.refreshing = false;
  }
  this.getList();
},
onRefresh() {
  this.reSetParams();
  this.getList();
},
// 重置参数
reSetParams() {
  this.pageParams.start = 0;
  this.refreshing = false;
  this.finished = false;
  this.loading = false;
  this.list = [];
},
getList() {
  userMessageReply({ ...this.pageParams }).then(res => {
    if (res.code == 0) {
      let list = res.data || [];
      list = list.map(item => {
        return {
          ...item,
          createTime: item.createTime
        };
      });
      // 加载状态结束
      this.loading = false;
      this.list = [...this.list,...list];
      console.log(this.list, "this.listthis.list");
      // 数据全部加载完成
      if (list.length < this.pageParams.limit) {
        this.finished = true;
      } else {
        this.pageParams.start += this.pageParams.limit;
      }
    }
  });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42