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

最新推荐文章于 2024-02-23 14:50:35 发布

萌小窝

最新推荐文章于 2024-02-23 14:50:35 发布

阅读量4k

点赞数 3

文章标签：小程序 uni-app 前端

本文链接：https://blog.csdn.net/weixin_42547971/article/details/117807498

版权

本文详细介绍了在uni-app中实现上拉加载分页功能的步骤，包括监听滚动条触底事件，判断是否有下一页数据，以及加载与显示提示信息。通过这种方法，可以有效地分批加载数据，提升用户体验。

摘要由CSDN通过智能技术生成

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

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