Vue-实现分页效果

# 实现分页效果

# 场景

由前端通过URL传参实现分页效果，有四个tab栏；当tab的索引为1，2，3的时候，实现分页效果，page为当前页，limit为一页数，type为查询的数据类型；

# 接口如下：

?s=/lst&page=1&limit=15&type=1

# 实现步骤：

在data中定义接收数据的数组、查询参数以及当前数据的总数

tabIndex:0,
// 云豆列表
integralList:[],
// 云豆查询参数
integralQueryParams: {
    type: 0,
    // 默认0 第一次调用时加会1
    page: 0,
    limit: 15
},
// 云豆列表总数
integralListTotal: null

1
2
3
4
5
6
7
8
9
10
11
12

在切换tab时候，判断当前的索引是否大于等于1，当大于等于1时，将当前索引赋值给查询参数中的类型

changeTabIndex(index){
    console.log(index)
    this.tabIndex = index
    if(index >= 1){
        this.integralQueryParams.type = index;
        // 每次查询先清空
        this.clearIntegralList();
        // 再获取数据
        this.appendNextPageToIntegralList();
    }
},

1
2
3
4
5
6
7
8
9
10
11

每次查询前先清空查询参数

// 获取云豆列表以及分页查询参数
clearIntegralList(){
    this.integralList = [];
    this.integralQueryParams.page = 0;
    this.integralListTotal = null;
}

1
2
3
4
5
6

获取数据

appendNextPageToIntegralList() {
    // 获取下一页数据，如果没有数据，则不请求
    // 当总数不为空并且总数大于当前数组的数目时不请求
    if (this.integralListTotal != null && this.integralListTotal <= this.integralList.length) {
        this.loadend = true;
        this.loadTitle = "哼😕~我也是有底线的~";
        return;
    }
    // 当条件允许将当前的page+1
    this.integralQueryParams.page = this.integralQueryParams.page + 1;

    // 发送请求
    listIntegral(this.integralQueryParams).then(res => {
        // 如果页面有多个列表，最好加上前缀表明是什么total integralListCount
        this.integralListTotal = res.count
        // 追加列表
        this.integralList = [...this.integralList, ...res.data.list];
        console.log(this.integralList)
    })
},

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

页面上拉触底事件的处理函数

onReachBottom: function() {
    if (this.tabIndex === 0) {
        this.getUserBillList();
    } else {
        // 2 3 4 tab
        this.appendNextPageToIntegralList();
    }
},

1
2
3
4
5
6
7
8

上次更新: 2024/08/14, 04:14:33

← Vue-Computed vs Watch Vue-this.$set→