uni-app学习笔记三十三--触底加载更多和下拉刷新的实现

触底加载更多在APP和小程序中使用中是很常见的场景，当用户划到底部时需要追加数据加以显示，当用户往下拉时需要实现有新的数据时将新数据放到顶部。

下面来说下这2种功能的实现方式

一.触底加载更多

核心代码实现：

onReachBottom(()=>{
	console.log("触底加载更多...")
	getPets()
})

function getPets(){
	uni.request({
		url:"https://tea.qingnian8.com/tools/petShow",
		data:{size:5},
		header:{"access-key":428771}
	}).then(res=>{
		if(res.data.errCode === 0){
			console.log(res)
			pets.value = [...pets.value,...res.data.data]
			console.log(pets.value)
		}else if(res.data.errCode === 400){
			uni.showToast({
				title:res.data.errMsg,
				icon:"none",
				duration:2000
			})
		}
	})
 }

处理的逻辑在于：将触底时，调用onReachBottom函数，onReachBottom调用getPets方法，向后台请求数据，并将数据追加到之前的数组中

pets.value = [...pets.value,...res.data.data]

二.下拉刷新

下拉刷新时，先清空以前的数据，再重新请求接口拿到新数据去填充。

onPullDownRefresh(()=>{
	pets.value=[]
	getPets()
})

获取到数据后，在request请求的finally代码块停止刷新

finally(()=>{
	uni.stopPullDownRefresh()
})