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: 约定数组为列向量, 层级:将多层传感器定义为一连串的层级,每个层级定义为一个类.类属性包括:权重. ...
随机推荐
- blinker库
参考 Blinker Documentation Blinker 是一个基于Python的强大的信号库,它既支持简单的对象到对象通信,也支持针对多个对象进行组播.Flask的信号机制就是基于它建立的. ...
- spring中用到哪些设计模式?
设计模式作为工作学习中的枕边书,却时常处于勤说不用的尴尬境地,也不是我们时常忘记,只是一直没有记忆. Spring作为业界的经典框架,无论是在架构设计方面,还是在代码编写方面,都堪称行内典范.好了,话 ...
- keepalive半同步双主一从
ip地址如下: 192.168.20.201 redis01 主 192.168.20.202 redis02 主 192.168.20.203 redis03 从 192.168.20.205 vi ...
- java基础编程题练习(二)
1.回文数 思路一:使用java特有解法,将原数字以字符串存储,翻转后赋值给新的字符串变量,再使用equals与原字符串进行对比 import java.util.Scanner; public cl ...
- 如何给PDF设置全屏动画
PPT文件可以播放全屏,并且可以实现飞入.分割.闪烁等动画模式播放.那么PDF文件可以吗?我们想要给PDF文件加入动画效果应该怎么做呢,也有很多的小伙伴不知道该怎么把PDF文件切换为全屏动画模式想要知 ...
- iPhoneX理发指南
 iPhoneX的正面几乎都是屏幕,除了一块齐刘海(sensor housing)来放置前置摄像头和一些传感器.为了让全屏的网页在iPhoneX上有比较好的浏览效果,必须保证布局的内容不被iPhne ...
- beta冲刺3/7
目录 摘要 团队部分 个人部分 摘要 队名:小白吃 组长博客:hjj 作业博客:beta冲刺(3/7) 团队部分 后敬甲(组长) 过去两天完成了哪些任务 整理博客 ppt模板 接下来的计划 做好机动. ...
- 必须知道的Linux内核常识详解
一.内核功能.内核发行版 1.到底什么是操作系统 (1)linux.windows.android.ucos就是操作系统: (2)操作系统本质上是一个程序,由很多个源文件构成,需要编译连接成操作系统程 ...
- mysql的坑
mysql安装报错: 1.The service already exists! The current server installed: 因为mysql卸载不完全. 解决方法: C:\window ...
- eclipse向tomcat部署站点发现没有class文件。
其实大部分解决办法在网上都有的,例如这里: https://blog.csdn.net/shiyuehit/article/details/53262807 eclipse下无法自动编译或编译失败等问 ...