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

本文介绍使用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>

希望对大家有帮助!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值