全部产品

下拉刷新

更新时间:2020-07-07 19:42:04

onPullDownRefresh

说明:mPaaS 10.1.32 及以上版本支持该接口。


Page 中自定义 onPullDownRefresh 函数,可以监听该页面用户的下拉刷新事件。

  • 需要在 app.json 的 window 选项中配置 "allowsBounceVertical":"YES",在页面对应的 .json 配置文件中配置 "pullRefresh":true 选项,才可开启页面下拉刷新事件。
  • 调用 my.startPullDownRefresh 后触发下拉刷新动画,效果与用户手动下拉刷新一致(会触发 onPullDownRefresh 监听方法)。
  • 当处理完数据刷新后,my.stopPullDownRefresh 可停止当前页面的下拉刷新。

入参

属性 类型 必填 描述
pullRefresh Boolean 是否允许下拉刷新。默认为 true。备注:下拉刷新生效的前提是 allowsBounceVertical 的值为 YES。
allowsBounceVertical String 页面是否支持纵向拽拉超出实际内容。默认为 YES, 支持 YES / NO。

代码示例

  1. // API-DEMO page/API/pull-down-refresh/pull-down-refresh.json
  2. {
  3. "defaultTitle": "下拉刷新",
  4. "pullRefresh": true
  5. }
  1. <!-- API-DEMO page/API/pull-down-refresh/pull-down-refresh.axml-->
  2. <view class="page">
  3. <view class="page-section">
  4. <view class="page-section-title">下滑页面即可刷新</view>
  5. <view class="page-section-btns">
  6. <view type="primary" onTap="stopPullDownRefresh">停止刷新</view>
  7. </view>
  8. </view>
  9. </view>
  1. // API-DEMO page/API/pull-down-refresh/pull-down-refresh.js
  2. Page({
  3. onPullDownRefresh() {
  4. console.log('onPullDownRefresh', new Date());
  5. },
  6. stopPullDownRefresh() {
  7. my.stopPullDownRefresh({
  8. complete(res) {
  9. console.log(res, new Date())
  10. }
  11. })
  12. }
  13. });

my.stopPullDownRefresh

说明:mPaaS 10.1.32 及以上版本支持该接口。


停止当前页面的下拉刷新。

  • 调用 my.startPullDownRefresh 后触发下拉刷新动画,效果与用户手动下拉刷新一致(会触发 onPullDownRefresh 监听方法)。
  • 当处理完数据刷新后,my.stopPullDownRefresh 可停止当前页面的下拉刷新。

入参

Object 类型,属性如下:

属性 类型 必填 描述
success Function 接口调用成功的回调函数。
fail Function 接口调用失败的回调函数。
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)。

代码示例

  1. // API-DEMO page/API/pull-down-refresh/pull-down-refresh.json
  2. {
  3. "defaultTitle": "下拉刷新",
  4. "pullRefresh": true
  5. }
  1. <!-- API-DEMO page/API/pull-down-refresh/pull-down-refresh.axml-->
  2. <view class="page">
  3. <view class="page-section">
  4. <view class="page-section-title">下滑页面即可刷新</view>
  5. <view class="page-section-btns">
  6. <view type="primary" onTap="stopPullDownRefresh">停止刷新</view>
  7. </view>
  8. </view>
  9. </view>
  1. // API-DEMO page/API/pull-down-refresh/pull-down-refresh.js
  2. Page({
  3. onPullDownRefresh() {
  4. console.log('onPullDownRefresh', new Date());
  5. },
  6. stopPullDownRefresh() {
  7. my.stopPullDownRefresh({
  8. complete(res) {
  9. console.log(res, new Date())
  10. }
  11. })
  12. }
  13. });

my.startPullDownRefresh

说明:mPaaS 10.1.32 及以上版本支持该接口。


开始下拉刷新。

  • 调用 my.startPullDownRefresh 后触发下拉刷新动画,效果与用户手动下拉刷新一致(会触发 onPullDownRefresh 监听方法)。
  • 当处理完数据刷新后,my.stopPullDownRefresh 可停止当前页面的下拉刷新。
  • my.startPullDownRefresh 不受 allowsBounceVerticalpullRefresh 参数影响。

入参

Object 类型,属性如下:

属性 类型 必填 描述
success Function 接口调用成功的回调函数。
fail Function 接口调用失败的回调函数。
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)。

代码示例

  1. my.startPullDownRefresh()