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

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

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

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);
 }

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

  
刷新次数: {{ count }}

onRefresh() {
   setTimeout(() => {
     Toast('刷新成功');
     this.isLoading = false;
     this.count++;
   }, 1000);
 }

实际项目案例：

   
     

       
{{ item.createTime }}
       

         

           

           

             测试数据
           
         
         

           {{ item.text }}
         
         

           
测试数据
           
查看详情>
         
       
     
   
 
 

   
 

data中定义数据

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

关键点在于上拉加载时要调用查询方法请求数据，下拉刷新时要先重置请求参数并调用查询方法请求数据。调用查询方法请求到数据后，将当前请求到的第二页数据合并到已有数据中，并且将加载状态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;
      }
    }
  });
}