vant实现上拉刷新，下拉加载

最新推荐文章于 2024-06-28 07:30:00 发布

kirito0615

最新推荐文章于 2024-06-28 07:30:00 发布

阅读量842

点赞数 1

分类专栏： vant 文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/kirito0615/article/details/106567880

版权

vant 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何利用Vant UI库实现上拉刷新和下拉加载功能，详细讲解了相关配置和步骤，适用于前端开发者提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vant实现上拉刷新，下拉加载

<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
  		</van-list>
</van-pull-refresh>

data() {
  return {
      loading: false,
      finished: false,
      refreshing: false,
      pageNum: 1,
      pageSize: 10,
      // 注意如果设置一次显示的量比较小,第一次加载时如果铺不满全屏,还会再次触发去请求第二页的数据
      serviceList: [],
      filters: {},
  },
methods: {
	onRefresh(msg) {
      // 清空列表数据
      this.finished = false;
      // 重新加载数据
      this.loading = true;
      this.pageNum = 1;
      this.onLoad();
    },
  	// 获取全部订单数据
    onLoad() {
      if (this.refreshing) {
        this.serviceList = [];
        this.refreshing = false;
      }
      let params = Object.assign({}, this.filters);
      params.pageNum = this.pageNum;
      params.pageSize = this.pageSize;
      pageApi.orderProgressFindList(params).then(
        result => {
          if (result) {
            if (result.total >= 10) {
              let list = result.data;
              let total = 0;
              if ((list.total * 1) % 10 == 0) {
                total = (result.total * 1) / 10;
              } else {
                total = parseInt((result.total * 1) / 10) + 1;
              }
              if (this.pageNum > 1) {
                this.serviceList = [...this.serviceList, ...list];
              } else {
                this.serviceList = list;
              }
              // 如果当前页数 = 总页数，则已经没有数据
              if (this.pageNum === total) {
                this.finished = true;
                this.finishedText = "- 没有更多了-";
              }
              // 如果总页数大于当前页码，页码+1
              if (total > this.pageNum) {
                this.pageNum++;
                this.loading = false;
              }
            } else {
              this.serviceList = result.data;
              this.finished = true;
              this.finishedText = "- 没有更多了-";
            }
          }
        },
        function(err) {}
      );
    },  
    // 调用
    closeSearchPop() {
        this.pageNum = 1;
        this.onRefresh();
   }
}