uni-app 中如何实现上滑分页和下拉刷新

Posted 2023-03-09

参考技术A 在 PC 端的网页中我可点击浏览器的左上角刷新按钮，对页面进行刷新的操作。或者点击列表框的下边的分页器进行分页操作。
可是在 App 中 或 嵌套在 App 中的 H5 中，不能像 PC 那样操作刷新和分页了。那在移动端中，我们怎么优雅的刷新和分页呢？其实也很简单，就是下拉时进行刷新，当滚动到底部时进行分页操作，即下拉刷新，上滑分页。
接下来让我们基于 uni-app 来具体看下改如何实现呢？

第一步： 在 pages.json 中 设置本页面的下拉刷新的属性：

第二步：调用页面对应的生命周期函数

也可以手动触发，调用 uni.startPullDownRefresh() 方法即可

第一步：在 pages.json 中设置本页面触底触发分页的距离

第二步：调用页面对应的生命周期函数

到此下拉刷新 和 上滑分页就实现了，是不是很简单哇，赶快试试吧！！！