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

最新推荐文章于 2023-12-21 11:45:02 发布

原创最新推荐文章于 2023-12-21 11:45:02 发布 · 2.7k 阅读

9 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#分页加载 #下拉刷新 #vue #vant

Vue 同时被 3 个专栏收录

13 篇文章

订阅专栏

实践案列

10 篇文章

订阅专栏

work

7 篇文章

订阅专栏

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

一、安装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="../assets/images/no_content.png"/>
          <p>还没有优质评论</p>
     </div>
     
     //上拉加载
     <van-list
          v-else
          v-model="loading"
          :finished="finished"
          :finished-text="list.length > 5 ? '已经到底部啦' : ''"
          loading-text="正在加载中"
          error-text="加载失败，请重试"
          @load="onLoad"
          >
      //内容区 
       <div v-for="(item,index) in listData" :key="index"   class='comment-item'>
          <commentList
              :title="item.title"
              :desc="item.desc"
              :img="item.img"
              :target_url="item.target_url"
           >
           </commentList>
          </div> 
        </van-list>
      </van-pull-refresh>
    </div>
  </template>
  <script>
import commentList from '@/components/commentList'
export default {
  name: 'MyComment',
  data() {
    return {
      loading: false,
      finished: false,
      refreshLoading: false,
      pageSize: 20, // 列表请求数
      pageNo: 1,//请求页码
      listData: [],//列表数据
      comment_nums: ''//评论总数量
    }
  },
  components: {
    commentList
  },
  created() {
    this.name = this.$route.query.name
  },
  mounted() {},
  methods: {
    getListData() {
      return new Promise((resolve, reject) => {
        this.$axios
          .get('?_m=get_page&_a=comment_data', {
            params: {
              page_no: this.pageNo,
              page_size: this.pageSize,
            },
          })
          .then((res) => {
            this.loading = false
            let data = res.data

            if (res.ret == 0) {
              this.comment_nums = data.comment_nums//总的数据量
              this.listData = this.listData.concat(data.comment_list)

              if (this.listData.length >= this.comment_nums) {//目前展示出来的数据量大于等于总的会返回的数据量的时候，代表数据已经全部返回了，数据已经加载完
                this.finished = true
              }
              this.pageNo++
              resolve(res)
            } else {
               console.log('网络错误')
            }
          })
          .catch(() => {
            reject()
            this.loading = false
            this.finished = true
            console.log('网络错误')
          })
      })
    },
    
    /**
     * 获取列表数据
     */
    onLoad() {
      this.getListData();
    },
    /**
     * 下拉刷新
     */
    onRefresh() {
      this.pageNo = 1;
      this.list = [];
      this.finished = false;
      this.loading = true
      this.fetchList().then(res => {
        this.refreshLoading = false
        this.$toast({
          message: "刷新成功",
          duration: 1000
        });
      }).catch(error => {
        this.refreshLoading = false
      });
    }
  }
}
</script>