apicloud apicloud

注册
查看: 1678|回复: 4

[模块教程] UIPullRefresh示例

老司机

UID:673413

主题:
175
帖子:
12674
云币:
5646

圣诞节

[模块教程] UIPullRefresh示例

1678 4 | 发表于 2018-10-18 14:23:47 |阅读模式 | |
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. }
复制代码





本帖子中包含更多资源    您需要 登录 才可以下载或查看,没有帐号?立即注册

老司机

UID:253706

主题:
177
帖子:
16969
云币:
8001
发表于 2018-10-18 17:27:52 |
感谢分享。

主题:
10
帖子:
75
云币:
1303

圣诞节

发表于 2019-1-6 23:16:56 |
config.xml 文件配置示例如下:

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

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

老司机

UID:673413

主题:
175
帖子:
12674
云币:
5646

圣诞节

 楼主| 发表于 2019-1-7 09:42:53 |
佩佩团队 发表于 2019-1-6 23:16
config.xml 文件配置示例如下:

是UIPullRefresh

主题:
6
帖子:
20
云币:
28
发表于 4 天前 |

webapp能用吗?
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表