All Products
Search
Document Center

Pull down refresh

Last Updated: Feb 05, 2021

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:

 
  1. // API-DEMO page/API/pull-down-refresh/pull-down-refresh.json
  2. {
  3. "defaultTitle": "Pull-down refresh",
  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">Pull down the page to refresh</view>
  5. <view class="page-section-btns">
  6. <view type="primary" onTap="stopPullDownRefresh">Stop refresh</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

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:

 
  1. // API-DEMO page/API/pull-down-refresh/pull-down-refresh.json
  2. {
  3. "defaultTitle": "Pull-down refresh",
  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">Pull down the page to refresh</view>
  5. <view class="page-section-btns">
  6. <view type="primary" onTap="stopPullDownRefresh">Stop refresh</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

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:

 
  1. my.startPullDownRefresh()