UIPullRefreshFlash模块demo示例
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 文件配置示例如下:
<preference name="customRefreshHeader" value="UIPullRefreshFlash"/>
复制代码
在 config.xml 配置后,则本模块为全局对象,可以在任意可弹动的窗体(frame、window)中调用 api.setCustomRefreshHeaderInfo 接口设置该下拉刷新样式,以及开始、停止刷新加载状态(api.refreshHeaderLoading、api.refreshHeaderLoadDone)。
②若想在不同的 window 或 frame 使用不同的下拉刷新模块,开发者可以在 window 或 frame 打开时传入参数 customRefreshHeader:'下拉刷新模的块名',以指定该窗体的下拉刷新模块。
{
api.openFrame({
name: 'UIPullRefreshFlash-con',
url: './UIPullRefreshFlash-con.html',
customRefreshHeader: 'UIPullRefreshFlash',
bounces: true,
rect: {
x: offset.l,
y: offset.t + offset.h,
w: offset.w,
h: bodyHeight - offset.h
}
});
}
复制代码
UIPullRefreshFlash模块有三个接口:
setCustomRefreshHeaderInfo:配置下拉刷新样式;
refreshHeaderLoading:手动开始下拉刷新的加载状态,注:下拉刷新状态亦可通过用户下拉到阈值自动触发;
refreshHeaderLoadDone:手动停止下拉刷新的加载状态;
下面是模块运行效果图:
最新文章
- java学习第三天 数组
- Django环境配置
- javascript 对象属性的get set访问器写法
- cut mysqladmin
- javascript设计模式学习之十二——享元模式
- lnmp脚本
- poj 2446 二分图最大匹配
- Microsoft Office Excel 不能访问文件
- 什么是AAC音频格式 AAC-LC 和 AAC-HE的区别是什么
- 增加删除的js
- SpringBoot的学习【4.快速实现一个SpringBoo的应用】
- 微信小程序案例:获取微信访问用户的openid
- JavaScript 引入方式 语言规范 语言基础 数据类型 常用方法 数组 if_else 比较运算符 for while 函数 函数的全局变量和局部变量 {Javascript学习}
- linux终端发送邮件
- [svc]ssh批量分发key/批量用户管理
- python进度条
- [转]采购文件中 RFI、RFQ、RFP、IFB的区别
- (三)使用预定义模型QDirModel的例子
- Visual C++编程实现摄像头视频捕捉
- FANCO工程机械云平台