uni-app 列表组件下拉翻页增加新数据

最新推荐文章于 2025-03-22 09:24:17 发布

StephenEvan

最新推荐文章于 2025-03-22 09:24:17 发布

阅读量1.2k

点赞数

分类专栏：历史杂文

本文链接：https://blog.youkuaiyun.com/wwt4007253/article/details/119149248

版权

本文介绍了在uni-app中如何实现列表组件的下拉翻页功能，通过引入uni-load-more组件并配置数据，以及监听触底事件来动态加载新数据。当新一页无数据时，显示没有更多数据的提示。在数据处理上，需要将请求到的数据不断推入到一个大数组中，同时考虑到不同状态的搜索查询。

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

在手机端基本上列表类数据的展示是以下拉至底部，持续上拉后自动翻页显示数据的。并且若第二页没有数据则返回没有更多数据

基本实现手段

首先在主index页面底部引入官方的uni-load-more组件

<uni-load-more v-if="show" :status="status"></uni-load-more>

数据配置：

show: false,
status: "more",
page: 1,
queryType:"",

然后再本页面加入触底事件

onReachBottom: function() {
   
			this.show = true
			/* loading 5秒后恢复显示上拉显示更多的文字提示 */
			this.status = "loading"
			/* 开始请求数据 */
			this.getData()
},

以前的做法是把请求来的数组或者对象进行赋值渲染但是这种情况下需要改成一个大数组然后进过请求不断地往里头推送数据

数据请求(由于项目，需要项目由运单状态的搜索查询，所以在请求开始阶段需要判断一下是否是同一个状态）

async getData() {
   
				/* 判断是否是同一条件查询 若是则页数加一 若不是则将页数归为第二页 并且将改类型赋值给当下的参数 */
				if (this.queryType != this.queryCriteria) {
   
					this.queryType = this

最低0.47元/天解锁文章