基于Vant框架的下拉刷新和上滑加载

最新推荐文章于 2025-04-16 09:51:31 发布

R511

最新推荐文章于 2025-04-16 09:51:31 发布

阅读量2.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： web

本文链接：https://blog.youkuaiyun.com/Webghost511/article/details/97135914

web 专栏收录该内容

19 篇文章

订阅专栏

本文介绍使用Vant-ui框架实现下拉刷新及上拉加载功能的方法。通过简单的代码示例展示了如何快速搭建页面，并利用框架提供的组件轻松实现高效的数据加载效果。

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

这里是基于了Vant-ui框架做的下拉刷新和上拉加载
没有用复杂原生JS来写，用框架非常的方便，一看就会，上手性也非常的强，同样效率也非常的高
废话不多说直接上代码，更多的API可以查看这里！！

下面的代码中我也改了一些参数，不过效果非常的好。
这里只是一些假数据模拟的，也可以用ajax来获取真是数据，效果更炸

<template>
  <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      class="load"
    >
      <van-cell v-for="item in list" :key="item" :title="item" />
    </van-list>
  </van-pull-refresh>
</template>

<script>
import Vue from "vue";
import { List, Cell, PullRefresh,Toast } from "vant";
Vue.use(List);
Vue.use(Cell);
Vue.use(PullRefresh);
Vue.use(Toast);
export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      isLoading: false,
    };
  },

  methods: {
    onLoad() {
      // 异步更新数据
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }
        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
        if (this.list.length >= 50) {
          this.finished = true;
        }
      }, 500);
    },
    onRefresh() {
      setTimeout(() => {
        this.$toast('刷新成功');
        this.isLoading = false;
        this.count++;
      }, 500);
    }
  }
};
</script>

希望对大家有帮助！