onPullDownRefresh

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

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

qin.startPullDownRefresh(OBJECT)

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

OBJECT 参数说明

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

success 返回参数说明

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

qin.stopPullDownRefresh()

停止当前页面下拉刷新。

示例

pages.json

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "uni-app",
        "enablePullDownRefresh": true
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "white",
    "navigationBarBackgroundColor": "#0faeff",
    "backgroundColor": "#fbf9fe"
  }
}

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "uni-app",
        "enablePullDownRefresh": true
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "white",
    "navigationBarBackgroundColor": "#0faeff",
    "backgroundColor": "#fbf9fe"
  }
}

Script

// 仅做示例，实际开发中延时根据需求来使用。
export default {
  data() {
    return {
      text: 'qinjs',
    },
  },
  onLoad: (theOptions) => {
    setTimeout(() => {
      console.log(theOptions, 'start pulldown');
    }, 1000);
    qin.startPullDownRefresh();
  },
  onPullDownRefresh() => {
    console.log('refresh');
    setTimeout(() => {
      qin.stopPullDownRefresh();
    }, 1000);
  },
};

// 仅做示例，实际开发中延时根据需求来使用。
export default {
  data() {
    return {
      text: 'qinjs',
    },
  },
  onLoad: (theOptions) => {
    setTimeout(() => {
      console.log(theOptions, 'start pulldown');
    }, 1000);
    qin.startPullDownRefresh();
  },
  onPullDownRefresh() => {
    console.log('refresh');
    setTimeout(() => {
      qin.stopPullDownRefresh();
    }, 1000);
  },
};

注意

• 支付宝小程序 startPullDownRefresh 在开发者工具里会提示暂未开放，请勿使用
• 支付宝小程序 startPullDownRefresh 请使用真机调试（非真机预览）
• 后续支付宝小程序开发工具更新可能会有所修改

FAQ

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

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

Q：如何自定义下拉刷新样式 A：小程序端的原生下拉刷新样式是固定的。插件市场搜索下拉刷新有示例。