uni-app之上拉加载数据，实现分页

上拉加载分页的功能分析：

1.用户上滑页面，滚动条触底，开始加载下一页数据

2.判断有没有下一页数据

3.假如没有下一页数据，显示提示内容

4.假如还有下一页数据，加载下一页数据
复制代码

首先我们先来在模板中添加提示消息的html代码

<view class="grace-loading" v-if="isLoadAll">{{ loadingTxt }}</view>
复制代码

然后在data中定义我们要用到的数据

data() {
    return {
        totalPages: 1,  // 总页数
        loadingTxt: '加载中...',
        isLoadAll: false,
        paramsData: {
            pageNum: 1,
            pageSize: 10,
        },
        salesOrderList: []  // list数组
    }
}
复制代码

页面上滑，滚动条触底事件

// uni-app页面滚动到底部的事件，常用于上滑加载下一页数据
onReachBottom() {
    // 判断当前页是否大于等于总页数
    if (this.totalPages <= this.paramsData.pageNum) {
        this.isLoadAll = true;
	this.loadingTxt = '没有更多数据啦~';
    } else {
	this.paramsData.pageNum++;
	this.isLoadAll = true;
	this.loadingTxt = '加载中...';
	this.querySalesCollectionDetails();   // 每次滑动请求接口，实现上拉加载更多数据
    }
},
复制代码

上滑拼接数据

methods:{
    querySalesCollectionDetails: function() {
	querySalesCollectionDetails(this.paramsData).then((res={}) => {
            this.totalPages = res.totalPages;
            this.salesOrderList = [...this.salesOrderList, ...res.list];
	})
    }
}
复制代码

如果有写错或者不足的地方，还请在评论区指正，我会及时修改！