apicloud apicloud

注册
查看: 1952|回复: 11

[模块教程] UIPullRefreshFlash模块demo示例

主题:
142
帖子:
7067
云币:
3632

圣诞节足球狗捣蛋鬼儿童节快乐

[模块教程] UIPullRefreshFlash模块demo示例

1952 11 | 发表于 2018-10-19 12:16:46 |阅读模式 | |
本帖最后由 粉红顽皮新 于 2018-12-25 17:41 编辑

UIPullRefreshFlash 模块概述:
UIPullRefreshFlash模块对引擎新推出的下拉刷新接口进行了一层封装,App 可以通过此模块来实现带炫酷动画效果的下拉刷新功能。使用此模块,在用户下拉时本模块会随用户下拉高度而放大缩小下拉出的提示图标,同时会随用户下拉高度播放一组关键帧图片,该图片数组是通过 api.setCustomRefreshHeaderInfo 接口以图片数组(参考下文 pull 参数)的形式传给模块的,每下拉一定距离(阈值/图片数量),播放一帧图片;当下拉高度达到一定阈值后触发加载事件:进入加载状态时,刷新提示图标开始播放加载关键帧图片数组,此时图片每帧间隔为 50 毫秒,同时将下拉刷新事件回发给前端。前端得到下拉刷新事件后开始加载数据;数据加载完毕,调用接口 api.refreshHeaderLoadDone 以停止加载状态;

详见模块文档:https://docs.apicloud.com/Client-API/UI-Layout/UIPullRefreshFlash

使用攻略:
①对于 APICloud 平台上的普通模块,在相应接口调用前需要先 require 该模块,但由于本模块是基于引擎下拉刷新功能扩展的模块,所以本模块使用方法比较特殊。可以不必 require 模块,改为在 config.xml 文件内配置模块。
config.xml 文件配置示例如下:
  1. <preference name="customRefreshHeader" value="UIPullRefreshFlash"/>
复制代码
config.xml 配置后,则本模块为全局对象,可以在任意可弹动的窗体(frame、window)中调用 api.setCustomRefreshHeaderInfo 接口设置该下拉刷新样式,以及开始、停止刷新加载状态(api.refreshHeaderLoading、api.refreshHeaderLoadDone)。
若想在不同的 window 或 frame 使用不同的下拉刷新模块,开发者可以在 window 或 frame 打开时传入参数 customRefreshHeader:'下拉刷新模的块名',以指定该窗体的下拉刷新模块。
  1. {
  2. api.openFrame({
  3.             name: 'UIPullRefreshFlash-con',
  4.             url: './UIPullRefreshFlash-con.html',
  5.             customRefreshHeader: 'UIPullRefreshFlash',
  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. }
复制代码
UIPullRefreshFlash模块有三个接口:
setCustomRefreshHeaderInfo:配置下拉刷新样式;

refreshHeaderLoading:手动开始下拉刷新的加载状态,注:下拉刷新状态亦可通过用户下拉到阈值自动触发;

refreshHeaderLoadDone:手动停止下拉刷新的加载状态;

下面是模块运行效果图:

demo代码包:

















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

实习司机

UID:716399

主题:
43
帖子:
130
云币:
218
发表于 2018-11-6 15:17:02 |
请问下这下拉刷新的图是打包前写死么。可以ajax赋值么

主题:
142
帖子:
7067
云币:
3632

圣诞节足球狗捣蛋鬼儿童节快乐

 楼主| 发表于 2018-11-6 15:18:03 |
gogoApp 发表于 2018-11-6 15:17
请问下这下拉刷新的图是打包前写死么。可以ajax赋值么

图是本地image的

驾校小白

UID:737239

主题:
0
帖子:
1
云币:
1
发表于 2018-12-19 11:19:09 |
请问不能引用gif动图吗

主题:
142
帖子:
7067
云币:
3632

圣诞节足球狗捣蛋鬼儿童节快乐

 楼主| 发表于 2018-12-19 11:21:53 |
千音 发表于 2018-12-19 11:19
请问不能引用gif动图吗

不行8,这其中的动画效果是很多张图片组成的

马路杀手

UID:705401

主题:
15
帖子:
308
云币:
1036
发表于 2018-12-21 10:04:14 |
好奇圣诞徽章咋拿

主题:
142
帖子:
7067
云币:
3632

圣诞节足球狗捣蛋鬼儿童节快乐

 楼主| 发表于 2018-12-21 10:14:20 |

驾校小白

UID:698192

主题:
0
帖子:
10
云币:
15
发表于 2019-1-14 15:11:21 |

职业车手

UID:538318

主题:
326
帖子:
1608
云币:
5919
发表于 2019-4-23 10:11:46 |
可以 有背景渐变吗

老司机

UID:673413

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

圣诞节

发表于 2019-4-23 16:16:49 |
不能的
12下一页
您需要登录后才可以回帖 登录 | 立即注册

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