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:手动停止下拉刷新的加载状态;
下面是模块运行效果图:
UIPullRefreshFlash模块demo示例的更多相关文章
- lua模块demo(redis,http,mysql,cjson,本地缓存)
1. lua模块demo(redis,http,mysql,cjson,本地缓存) 1.1. 配置 在nginx.conf中设置lua_shared_dict my_cache 128m; 开启ngi ...
- 【分享】Vue 资源典藏(UI组件、开发框架、服务端、辅助工具、应用实例、Demo示例)
Vue 资源典藏,包括:UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和 ...
- Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例
Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组件库 ...
- Demo 示例控制输入光标位置
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <meta name="aut ...
- 为Lua5.3编写C模块简单示例
为Lua5.3编写C模块简单示例 一.编译安装Lua5.3 MSVC 命令行安装脚本: @echo off md bin md lib md include cd src cl /c /nologo ...
- Ext简单demo示例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- kafka_2.11-0.8.2.1+java 生产消费程序demo示例
Kafka学习8_kafka java 生产消费程序demo示例 kafka是吞吐量巨大的一个消息系统,它是用scala写的,和普通的消息的生产消费还有所不同,写了个demo程序供大家参考.kaf ...
- Ansible VMware模块使用示例
vmware_vm_facts模块使用示例 执行条件: 安装Pyvmimo: pip install pyvmomi 方法一,直接编写单个yaml文件: - hosts: localhost # 注 ...
- theano 模块 MLP示例
theano 模块 MLP示例,有需要的朋友可以参考下. theano教程Example: MLP: 约定数组为列向量, 层级:将多层传感器定义为一连串的层级,每个层级定义为一个类.类属性包括:权重. ...
随机推荐
- 更改Ubuntu默认python版本的方法
当你安装 Debian Linux 时,安装过程有可能同时为你提供多个可用的 Python 版本,因此系统中会存在多个 Python 的可执行二进制文件.一般Ubuntu默认的Python版本都为2. ...
- laravel whereDoesntHave
select * from `feeds` where not exists (select * from `black_lists` where `feeds`.`user_id` = `black ...
- MyString
[摘自C++程序设计语言] MyString.h #include <cstring> #include <iostream> #include <stdexcept&g ...
- 普通用户登陆系统显示 -bash-4.1$
如题,今天上午用户登陆系统之后显示-bash-4.1$ 造成这样的原因: 与这个用户有关环境变量没了,有关的文件被删除.也就是用户的家目录下面 .bash_profile .bashrc 被删除. 解 ...
- Codeforces 1110D. Jongmah 动态规划
原文链接https://www.cnblogs.com/zhouzhendong/p/CF1110D.html 题意 给定 n 个数,每一个数都是在 [1,m] 里的整数. 从中取出形如 {x,x,x ...
- Java运行原理、三大体系、jdk构成
一.java运行原理: 二.Java分为三个体系: JavaSE(J2SE)(Java2 Platform Standard Edition,java平台标准版) JavaEE(J2EE)(Java ...
- 在js中网页面写入数据时需要注意的几点
网页代码 <tbody id="t_gun"> <s:iterator value="gunList" status="st&quo ...
- Windows 7 下使用 pandoc 转换文档格式
工作中我们经常需要面对各种各样的文档格式,文档格式转换也就在所难免.通常有些文档编辑工具会提供自带的格式转换功能,但可转换格式比较有限.pandoc 正好可以解决这个问题,几乎你能见到的所有文档格式都 ...
- Android Studio帮助文档的安装及智能提示设置
初次使用Android Studio,发现其智能提示不能像Visual Studio一样显示系统方法等的详细用途描述.经查找资料,问题原因是未安装SDK Document. 解决办法如下: 1.打开如 ...
- (89)Wangdao.com第二十二天_JavaScript DocumentFragment 节点
DocumentFragment 节点 代表一个文档的片段,本身就是一个完整的 DOM 树形结构. 它没有父节点,.parentNode 返回 null 可以插入任意数量的子节点. 不属于当前文档,操 ...