vue项目vant下拉刷新，上拉加载，实现切换Tab页面数据下拉加载更多（分页）

原创已于 2024-12-13 11:37:18 修改 · 4.3k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #svn #前端框架

于 2023-07-20 23:33:43 首次发布

VUE2 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何在Vue.js项目中使用Vant框架实现下拉刷新和上拉加载功能，特别是在切换Tab页面时确保数据能够正确地进行下拉加载更多（分页）。通过设置html结构，定义data参数，以及编写methods方法来实现这一功能。

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

1、html结构

<van-tabs v-model="active" animated line-width="100" title-active-color='#262626' color='#00BF7F' @click="onClick">
      <van-tab v-for="(index) in listName" :title="index" />   
</van-tabs>

// 原本这里我是写在上面的van-tab里面嵌套的，结果调用接口的时候会有bug(切换tab时接口的分页数据total为20条，结果渲染30条出来)

<div class='home-main-txt'>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
         <van-list
             style=" min-height:750px "   // 由于下拉，这里要设置个高度
             v-model="loading"
             :finished="finished"
             finished-text="没有更多了"
             @load="onLoad"
          >
            所展示的内容
          </van-list>
    </van-pull-refresh>
</div>

2、data参数

data() {
  return {
        pageNo: 1,
        pageSize: 10,
        loading: false,
        finished: false,
        active: '',
        listName: [
            "Tab", "所展示", "的", "内容"
        ],
        shopInfo:[],                    // 接口传过来数组
        type: 0,                        // tab类型的判断
        refreshing: false,
   }
},

3、methods方法，直接调用，不需要在mounted里再次调用方法

        // 切换Tab时改变的值
        onClick(index, name) {
            this.type = index
            this.pageNo=1         //由于数据量很大，这里页数需要重置为第一页
            this.finished = false;
            this.shopInfo = [];	  //接口数据清空
        },

        // 调用接口数据
          getList() {
            getInterfaceData({
                pageNo: this.pageNo,
                pageSize: this.pageSize,
                type: this.type
            }).then((res) => {

                    // 空数据 停止加载
                    if(res.data.records.length == 0){
                        this.shopInfo = [];
                        this.finished = true;
                        return;
                    }

                    // 有数据 赋值列表 加载状态结束
                    res.data.records.forEach(item => {
                        this.finished = false
                        this.shopInfo.push(item)
                    })

                    this.loading = false;
                    this.refreshing = false;

                    // 如果list长度大于等于总数据条数，数据全部加载完成
                    if(this.shopInfo.length >= res.data.total){
                        this.finished = true;//结束加载
                    }
                    
           
            }).catch((err) => {
                console.log('err',err);
            })
        },


        // 若加载条到了底部
        onLoad() {                          
            this.getList();					// 调用上面方法,请求数据
            this.pageNo++;					// 分页数加一
        },

        // 加载失败调用方法
        onRefresh() {
            this.finished = false; 		    // 清空列表数据
            this.refreshing = true;
            this.loading = true; 			// 加载状态
            this.pageNo = 1;				// 分页数赋值为1
            this.shopInfo = [];				// 清空数组
            this.onLoad(); 				    // 重新加载数据
        },