用vant实现下拉刷新和上拉加载功能(vue项目)

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

子月吾生

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

阅读量2.5k

点赞数

分类专栏： work 实践案列 Vue 文章标签：分页加载下拉刷新 vue vant

本文链接：https://blog.csdn.net/Sunday97/article/details/109856945

版权

本文介绍了如何在Vue项目中使用 vant 框架实现下拉刷新和上拉加载功能。首先，讲解了 vant 的安装过程，然后通过按需引入组件配置 babel.config.js 文件。接着，在 main.js 中进行相关设置。最后，详细展示了在 index.vue 页面中实现下拉刷新和上拉加载功能的关键代码，包括 getListData、onLoad 和 onRefresh 三个主要函数的用途。

摘要由CSDN通过智能技术生成

一、安装vant

npm i vant -S

二、按需引入组件

按需引入组件，操作babel.config.js文件写入

  plugins: [
    ['import', {
   
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]

我的操作图如下：
在这里插入图片描述

三、操作main.js

import {
   
  PullRefresh,
  List,
  Toast,
} from "vant";

Vue.use(List)
  .use(Toast)
  .use(PullRefresh);

四、实现下拉刷新和上拉加载功能的index.vue页面

以下是我做过的一个关于评论列表的的页面
关键性代码如下：
以上代码的js部分总共有三部分：getListData函数（请求接口数据）、onLoad函数（上拉时请求更多数据）、 onRefresh函数（下拉时重置一些数据并重新请求接口数据）

<template>
 <div class="com-wrap">
    //下拉刷新
    <van-pull-refresh 
     v-model="refreshLoading" 
     @refresh="onRefresh" 
     class='min-height'>
     
     //无数据时的展示
     <div class="no-comment" v-if="finished && !list.length">
          <img src&#