支付宝小程序API 下拉刷新

2020-09-14 13:43 更新

my.startPullDownRefresh

简介

my.startPullDownRefresh 是主动开启下拉刷新的 API。

使用限制

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

扫码体验

下拉刷新.jpeg

示例代码

//.js
my.startPullDownRefresh()

入参

Object 类型,属性如下:

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

my.stopPullDownRefresh

简介

my.stopPullDownRefresh 是停止当前页面的下拉刷新的 API。

使用限制

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

扫码体验

下拉刷新.jpeg

示例代码

// API-DEMO page/API/pull-down-refresh/pull-down-refresh.json
{
    "defaultTitle": "下拉刷新",
    "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">下滑页面即可刷新</view>
    <view class="page-section-btns">
      <view type="primary" onTap="stopPullDownRefresh">停止刷新</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())
      }
    })
  }
});

入参

Object 类型,属性如下:

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

onPullDownRefresh

简介

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

使用限制

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

扫码体验

下拉刷新.jpeg

示例代码

// API-DEMO page/API/pull-down-refresh/pull-down-refresh.json
{
    "defaultTitle": "下拉刷新",
    "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">下滑页面即可刷新</view>
    <view class="page-section-btns">
      <view type="primary" onTap="stopPullDownRefresh">停止刷新</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())
      }
    })
  }
});

入参

属性 类型 必填 描述
pullRefresh Boolean 是否允许下拉刷新。默认 true。说明:下拉刷新生效的前提是 allowsBounceVertical 值为 YES 。
allowsBounceVertical String 页面是否支持纵向拽拉超出实际内容。默认 YES,支持 YES/NO
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号