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

Bertha 。 2022-12-22 15:23 695阅读 0赞

### 下拉刷新和上拉加载 ###

*  一、安装vant
 *  二、按需引入组件
 *  三、操作main.js
 *  四、实现下拉刷新和上拉加载功能的index.vue页面

# 一、安装vant #

npm i vant -S

# 二、按需引入组件 #

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

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

我的操作图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70_pic_center 1]

# 三、操作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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/f55658ff93354149a583a5f2300f902a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/b6305ddf8bf5487285fbfdd64c469a69.png