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()
})