Pull down refresh - Mobile Platform as a Service - Alibaba Cloud Documentation Center

onPullDownRefresh

This API is supported in mPaaS 10.1.32 and later versions.

On the Page, customize the onPullDownRefresh function to listen to the pull-down refresh event from the user.

To enable the pull-down refresh event, the "pullRefresh":true option needs to be configured in the .json configuration file of the related page, and the "allowsBounceVertical":"YES" option needs to be configured in window of app.json.
After calling my.startPullDownRefresh, the pull-down refresh animation is triggered, and the effect is consistent with the user’s manual pull-down refresh (the onPullDownRefresh monitoring method will be triggered).
When the data is refreshed, my.stopPullDownRefresh can stop the pull-down refresh of the current page.

Input parameters

Attribute	Type	Required	Description
pullRefresh	Boolean	No	Whether to enable pull-down refresh. The default value is true. Note: Only when the value of `allowsBounceVertical` is YES, the pull-down refresh will take effect.
allowsBounceVertical	String	No	Whether the page supports vertical dragging beyond the actual content. The default value is YES, it supports YES/NO.

Code sample

onPullDownRefresh code sample is as follows:

// API-DEMO page/API/pull-down-refresh/pull-down-refresh.json
{
    "defaultTitle": "Pull-down refresh",
    "pullRefresh": true
}

<!-- API-DEMO page/API/pull-down-refresh/pull-down-refresh.axml-->
<view class="page">
  <view class="page-section">
    <view class="page-section-title">Pull down the page to refresh</view>
    <view class="page-section-btns">
      <view type="primary" onTap="stopPullDownRefresh">Stop refresh</view>
    </view>
  </view>
</view>

// API-DEMO page/API/pull-down-refresh/pull-down-refresh.js
Page({
  onPullDownRefresh() {
    console.log('onPullDownRefresh', new Date());
  },
  stopPullDownRefresh() {
    my.stopPullDownRefresh({
      complete(res) {
        console.log(res, new Date())
      }
    })
  }
});

my.stopPullDownRefresh

This API is supported in mPaaS 10.1.32 and later versions.

Stop pull-down refresh on current page.

After calling my.startPullDownRefresh, the pull-down refresh animation is triggered, and the effect is consistent with the user’s manual pull-down refresh (the onPullDownRefresh monitoring method will be triggered).
When the data is refreshed, my.stopPullDownRefresh can stop the pull-down refresh of the current page.

Input parameters

Object type, the attributes are as follows:

Attribute	Type	Required	Description
success	Function	No	Callback function for successful call.
fail	Function	No	Callback function for failed call.
complete	Function	No	Callback function for ended call (executed regardless of whether the call is successful or failed).

Code sample

my.stopPullDownRefresh code sample is as follows:

// API-DEMO page/API/pull-down-refresh/pull-down-refresh.json
{
    "defaultTitle": "Pull-down refresh",
    "pullRefresh": true
}

<!-- API-DEMO page/API/pull-down-refresh/pull-down-refresh.axml-->
<view class="page">
  <view class="page-section">
    <view class="page-section-title">Pull down the page to refresh</view>
    <view class="page-section-btns">
      <view type="primary" onTap="stopPullDownRefresh">Stop refresh</view>
    </view>
  </view>
</view>

// API-DEMO page/API/pull-down-refresh/pull-down-refresh.js
Page({
  onPullDownRefresh() {
    console.log('onPullDownRefresh', new Date());
  },
  stopPullDownRefresh() {
    my.stopPullDownRefresh({
      complete(res) {
        console.log(res, new Date())
      }
    })
  }
});

my.startPullDownRefresh

This API is supported in mPaaS 10.1.32 and later versions.

Start pull-down refresh on current page.

After calling my.startPullDownRefresh, the pull-down refresh animation is triggered, and the effect is consistent with the user’s manual pull-down refresh (the onPullDownRefresh monitoring method will be triggered).
When the data is refreshed, my.stopPullDownRefresh can stop the pull-down refresh of the current page.
my.startPullDownRefresh is not affected by the allowsBounceVertical and pullRefresh parameters.

Input parameters

Object type, the attributes are as follows:

Attribute	Type	Required	Description
success	Function	No	Callback function for successful call.
fail	Function	No	Callback function for failed call.
complete	Function	No	Callback function for ended call (executed regardless of whether the call is successful or failed).

Code sample

my.startPullDownRefresh code sample is as follows:

my.startPullDownRefresh()