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

1、html结构

         


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


    
         
            所展示的内容
          
    

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(); 				    // 重新加载数据
        },