uniapp下拉刷新数据

需求:

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

uniapp下拉刷新数据_第1张图片

步骤:

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

uniapp下拉刷新数据_第2张图片

 在该页面中写入刷新函数

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() //没有回调函数时则不调用
			}

你可能感兴趣的:(前端)