• onPullDownRefresh
  • uni.startPullDownRefresh(OBJECT)
  • uni.stopPullDownRefresh()
  • FAQ

    onPullDownRefresh

    在 js 中定义 onPullDownRefresh 处理函数（和onLoad等生命周期函数同级），监听该页面用户下拉刷新事件。

    • 需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh。
    • 当处理完数据刷新后，uni.stopPullDownRefresh 可以停止当前页面的下拉刷新。

    uni.startPullDownRefresh(OBJECT)

    开始下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。

    平台差异说明

    5+AppH5微信小程序支付宝小程序百度小程序头条小程序
    √√√x√√

    OBJECT 参数说明

    参数名类型必填说明
    successFunction否接口调用成功的回调
    failFunction否接口调用失败的回调函数
    completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）

    success 返回参数说明

    参数类型说明
    errMsgString接口调用结果

    uni.stopPullDownRefresh()

    停止当前页面下拉刷新。

    示例

    pages.json

    1. {
    2.     "pages": [
    3.         {
    4.             "path": "pages/index/index",
    5.             "style": {
    6.                 "navigationBarTitleText": "uni-app",
    7.                 "enablePullDownRefresh": true
    8.             }
    9.         }
    10.     ],
    11.     "globalStyle": {
    12.         "navigationBarTextStyle": "white",
    13.         "navigationBarBackgroundColor": "#0faeff",
    14.         "backgroundColor": "#fbf9fe"
    15.     }
    16. }

    index.vue

    1. // 仅做示例，实际开发中延时根据需求来使用。
    2. export default {
    3.     data: {
    4.         text: 'uni-app'
    5.     },
    6.     onLoad: function (options) {
    7.         setTimeout(function () {
    8.             console.log('start pulldown');
    9.         }, 1000);
    10.         uni.startPullDownRefresh();
    11.     },
    12.     onPullDownRefresh() {
    13.         console.log('refresh');
    14.         setTimeout(function () {
    15.             uni.stopPullDownRefresh();
    16.         }, 1000);
    17.     }
    18. }

    FAQ

    Q：如何暂时禁用掉下拉刷新，待需要的时候再重新开启？A：5+App 平台下可以处理此类场景，详细参考：uni-app 中实现动态禁用/开启下拉刷新

    Q：自定义title如何让下拉刷新在title之下A：App和H5端使用circle方式的下拉刷新，设offset在title高度之下。hello uni-app的模板-导航栏中有示例。小程序端无法实现，除非放弃原生下拉刷新，自己模拟。

    Q：如何自定义下拉刷新样式A：小程序端的原生下拉刷新样式是固定的；App端原生的下拉刷新有2种样式可选择，下拉漏出雪花和下拉circle圈。如果使用nvue，也可以自己实现下拉刷新，都是原生渲染。如果想使用scroll-view在前端实现自定义下拉刷新，需要注意列表不可太长和太复杂，否则会有性能问题。插件市场搜索下拉刷新有示例。

    发现错误？想参与编辑？在 GitHub 上编辑此页面！