UIPullRefresh示例

得呤

UIPullRefresh 模块对引擎新推出的下拉刷新接口进行了一层封装，App 可以通过此模块来实现带炫酷动画效果的下拉刷新功能。使用此模块，在用户下拉时本模块会随用户下拉高度而放大缩小下拉出的提示图标；当下拉高度到一定阈值后出发加载事件，与此同时，下拉提示图标会改变为播放一组关键帧图片，该图片数组是通过 api.setCustomRefreshHeaderInfo 接口以图片数组（参考下文transform参数）的形式传给模块的，此过程播放每帧时间间隔为 100 毫秒；当下拉刷新进入加载状态时，刷新提示图标开始播放加载关键帧图片数组，此时图片每帧间隔为 50 毫秒，同时将下拉刷新事件回发给前端。
前端得到下拉刷新事件后开始加载数据；数据加载完毕，调用接口 api.refreshHeaderLoadDone 以停止加载状态；
文档链接
模块使用攻略对于 APICloud 平台上的普通模块，在相应接口调用前需要先 require 该模块，但由于本模块是基于引擎下拉刷新功能扩展的模块，所以本模块使用方法比较特殊。可以不必 require 模块，改为在 config.xml 文件内配置模块。


config.xml 文件配置示例如下：

1. <preference name="customRefreshHeader" value="下拉刷新的模块名"/>

复制代码

在 config.xml 配置后，则本模块为全局对象，可以在任意可弹动的窗体（frame、window）中调用 api.setCustomRefreshHeaderInfo 接口设置该下拉刷新样式，以及开始、停止刷新加载状态（api.refreshHeaderLoading、api.refreshHeaderLoadDone）。
若想在不同的 window 或 frame 使用不同的下拉刷新模块，开发者可以在 window 或 frame 打开时传入参数 customRefreshHeader:'下拉刷新模的块名'，以指定该窗体的下拉刷新模块。如：

视频演示

1. {
   
2. api.openFrame({
   
3.             name: 'UIPullRefresh-con',
   
4.             url: './UIPullRefresh-con.html',
   
5.             customRefreshHeader: 'UIPullRefresh',
   
6.             bounces: true,
   
7.             rect: {
   
8.                 x: offset.l,
   
9.                 y: offset.t + offset.h,
   
10.                 w: offset.w,
    
11.                 h: bodyHeight - offset.h
    
12.             }
    
13.         });
    
14. }

复制代码

gigie

感谢分享。

佩佩团队

config.xml 文件配置示例如下：

<preference name="customRefreshHeader" value="下拉刷新的模块名"/>

这个模块名是啥意思没看懂 value里填写的模块名 是填什么比如我用的是 UIPullRefresh 是填这个还是填什么 示例没看懂

得呤

佩佩团队 发表于 2019-1-6 23:16
config.xml 文件配置示例如下：

是UIPullRefresh

骆驼车友

得呤 发表于 2019-1-7 09:42
是UIPullRefresh

webapp能用吗？

@merforg

pull，transform  load  都传了，但是还有默认的图片去不掉  是怎么回事呢？