前言
在 PC 端的网页中我可点击浏览器的左上角刷新按钮，对页面进行刷新的操作。或者点击列表框的下边的分页器进行分页操作。
可是在 App 中 或 嵌套在 App 中的 H5 中，不能像 PC 那样操作刷新和分页了。那在移动端中，我们怎么优雅的刷新和分页呢？其实也很简单，就是下拉时进行刷新，当滚动到底部时进行分页操作，即下拉刷新，上滑分页。
接下来让我们基于 uni-app 来具体看下改如何实现呢？
下拉刷新
第一步： 在 pages.json 中 设置本页面的下拉刷新的属性：
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app",
"enablePullDownRefresh": true //开启下拉刷新
}
}
]
第二步：调用页面对应的生命周期函数
// 页面下拉时触发，与 onLoad 等生命周期函数平级
onPullDownRefresh() {
console.log('refresh');
setTimeout(function () {
// 操作完成时，必须结束下拉刷新，否则一直会有 loading 标志
uni.stopPullDownRefresh();
}, 1000);
}
也可以手动触发，调用 uni.startPullDownRefresh() 方法即可
上滑分页
第一步：在 pages.json 中设置本页面触底触发分页的距离
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app",
"enablePullDownRefresh": true, // 开启下拉刷新
"onReachBottomDistance": 50 // 距离底部 50px 时触发
}
}
]
或者全局设置
"globalstyle": {
"onReachBottomDistance": 50 //设置后，所有页面都起效
}
第二步：调用页面对应的生命周期函数
onReachBottom(){
console.log('触底了')
}
到此下拉刷新 和 上滑分页就实现了，是不是很简单哇，赶快试试吧！！！
