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

前言

在 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('触底了')
}

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