uniapp下拉刷新数据

最新推荐文章于 2024-10-25 16:00:53 发布

老百京儿鸡肉卷

最新推荐文章于 2024-10-25 16:00:53 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

文章标签：前端

本文链接：https://blog.csdn.net/ZYT1023/article/details/122610059

本文介绍了如何在uni-app中设置页面下拉刷新功能，详细解析了onPullDownRefresh事件处理函数，包括数据清空、延迟加载新数据以及使用uni.stopPullDownRefresh停止刷新的过程。同时，讲解了获取数据的异步函数getGoods，通过新旧数据对比实现数据渲染，确保页面稳定。

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

需求：

该页面下拉后页面清空，下拉完成后数据渲染，并解决数据渲染后仍在刷新

步骤：

在pages.json文件中开启该页面的下拉刷新

在该页面中写入刷新函数

onPullDownRefresh() {
			this.index=1 //第一页数据
			this.goods=[] //将页面数据清空
			setTimeout(()=>{
				this.getGoods(()=>{ //清空后一秒获取数据
					uni.stopPullDownRefresh() //回调，获取数据后停止刷新
				})
			},1000)
			
		}

获取数据函数

async getGoods(callback){ //形参接收回调函数
				const res=await this.$myapi({
					url:'/goods/search',
					data:{
						pagenum:this.index,
						pagesize:5
					}
				})
				this.goods=[...this.goods,...res.data.message.goods] //新旧数据对比，没有则添加，有则保存
				callback && callback() //没有回调函数时则不调用
			}