Pull-down refresh

onPullDownRefresh

Define the onPullDownRefresh function on a Page to listen for pull-down refresh events.

• Set "pullRefresh":true in the page .json file and "allowsBounceVertical":"YES" in window of app.json.

• Calling my.startPullDownRefresh triggers the refresh animation and fires the onPullDownRefresh callback, the same as a manual pull-down.

• Call my.stopPullDownRefresh to stop the refresh animation after data loading completes.

Parameters

Attribute	Type	Required	Description
pullRefresh	Boolean	No	Enables pull-down refresh. Default: true. Takes effect only when allowsBounceVertical is YES.
allowsBounceVertical	String	No	Allows vertical over-scroll beyond page content. Default: YES. Valid values: YES, NO.

Code sample

onPullDownRefresh example:

// 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

Stops the pull-down refresh animation on the current page.

• Calling my.startPullDownRefresh triggers the refresh animation and fires onPullDownRefresh, the same as a manual pull-down.

• Call my.stopPullDownRefresh to stop the refresh animation after data loading completes.

Parameters

Object with the following attributes:

Attribute	Type	Required	Description
success	Function	No	Called on success.
fail	Function	No	Called on failure.
complete	Function	No	Called when the call completes, regardless of success or failure.

Code sample

my.stopPullDownRefresh example:

// 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

Supported in mPaaS 10.1.32 and later.

Starts the pull-down refresh animation on the current page.

• Calling my.startPullDownRefresh triggers the refresh animation and fires onPullDownRefresh, the same as a manual pull-down.

• Call my.stopPullDownRefresh to stop the refresh animation after data loading completes.

• my.startPullDownRefresh is not affected by allowsBounceVertical or pullRefresh.

Parameters

Object with the following attributes:

Attribute	Type	Required	Description
success	Function	No	Called on success.
fail	Function	No	Called on failure.
complete	Function	No	Called when the call completes, regardless of success or failure.

Code sample

my.startPullDownRefresh example:

my.startPullDownRefresh()