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

背景:在移动端项目开发中有列表页面开发,需要实现上拉加载下一页数据,下拉刷新页面。

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>

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,表示加载完成。

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

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

实际项目案例:

<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>

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;
      }
    }
  });
}
相关推荐
哑巴语天雨12 小时前
React+Vite项目框架
前端·react.js·前端框架
码农老起12 小时前
掌握 React:组件化开发与性能优化的实战指南
react.js·前端框架
撸码到无法自拔16 小时前
React:组件、状态与事件处理的完整指南
前端·javascript·react.js·前端框架·ecmascript
Domain-zhuo16 小时前
如何利用webpack来优化前端性能?
前端·webpack·前端框架·node.js·ecmascript
web150850966411 天前
【React&前端】大屏适配解决方案&从框架结构到实现(超详细)(附代码)
前端·react.js·前端框架
Cachel wood1 天前
Vue.js前端框架教程8:Vue消息提示ElMessage和ElMessageBox
linux·前端·javascript·vue.js·前端框架·ecmascript
Super毛毛穗1 天前
Vue中<script setup></script>的主要语法元素和特性
前端·javascript·vue.js·前端框架
h_小波2 天前
探索 Vue.js 组件开发:从基础到进阶的完整指南
前端·vue.js·前端框架
多客软件佳佳2 天前
便捷的线上游戏陪玩、线下家政预约以及语音陪聊服务怎么做?系统代码解析
前端·游戏·小程序·前端框架·uni-app·交友
好开心332 天前
04、Vue与Ajax
前端·ajax·前端框架·vue·js