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示例的更多相关文章

  1. lua模块demo(redis,http,mysql,cjson,本地缓存)

    1. lua模块demo(redis,http,mysql,cjson,本地缓存) 1.1. 配置 在nginx.conf中设置lua_shared_dict my_cache 128m; 开启ngi ...

  2. 【分享】Vue 资源典藏(UI组件、开发框架、服务端、辅助工具、应用实例、Demo示例)

    Vue 资源典藏,包括:UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和 ...

  3. Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例

    Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组件库 ...

  4. Demo 示例控制输入光标位置

    <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <meta name="aut ...

  5. 为Lua5.3编写C模块简单示例

    为Lua5.3编写C模块简单示例 一.编译安装Lua5.3 MSVC 命令行安装脚本: @echo off md bin md lib md include cd src cl /c /nologo ...

  6. Ext简单demo示例

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  7. kafka_2.11-0.8.2.1+java 生产消费程序demo示例

      Kafka学习8_kafka java 生产消费程序demo示例 kafka是吞吐量巨大的一个消息系统,它是用scala写的,和普通的消息的生产消费还有所不同,写了个demo程序供大家参考.kaf ...

  8. Ansible VMware模块使用示例

    vmware_vm_facts模块使用示例 执行条件: 安装Pyvmimo:  pip install pyvmomi 方法一,直接编写单个yaml文件: - hosts: localhost # 注 ...

  9. theano 模块 MLP示例

    theano 模块 MLP示例,有需要的朋友可以参考下. theano教程Example: MLP: 约定数组为列向量, 层级:将多层传感器定义为一连串的层级,每个层级定义为一个类.类属性包括:权重. ...

随机推荐

  1. python学习第22天

    封装 properpty classmathod staticmathod

  2. iOS -- Effective Objective-C 阅读笔记 (4)

    1: 在 对象内部 尽量 直接访问 实例变量 在对象之外访问实例变量时, 总是应该通过属性来访问, 然而在对象内部, 在读取实例变量的时候尽量采用 直接访问的形式, 而在设置实例变量的时候通过属性来做 ...

  3. SpringMVC概述

    1. SpringMVC是什么 SpringMVC 是 Spring 框架内置的 MVC 的实现.SpringMVC 就是一个 Spring 内置的 MVC 子框架 Spring 子框架:意味着 Sp ...

  4. Selenium+Python ---- 免登录

    1.免登录在进行测试的过程中难免会遇到登录的情况,给测试工作添加了工作量,本文仅提供一些思路供参考解决方式:手动请求中添加cookies.火狐的profile文件记录信息实现.人工介入.万能验证码.去 ...

  5. js 随机生成颜色值

    function getRandomColor(){ var colorValue = [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f']; var s = & ...

  6. js分析 汽_车_之_家 js生成css伪元素 hs_kw44_configUS::before

    0.参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements https://developer.mozilla.org/ ...

  7. Linux下执行Java程序报错

    在linux下编译java程序,执行javac编译生成class文件时,在centos7终端输入如,javac hello.java    会提示未找到指令,但用java -verison测试环境变量 ...

  8. The Triangle(DP-数塔问题)

    题目链接:http://poj.org/problem?id=1163 7 3 8 8 1 0 2 7 4 4 4 5 2 6 5 (Figure 1) Figure 1 shows a number ...

  9. sqlalchemy.exc.ProgrammingError: (pymysql.err.ProgrammingError)

    在我学习flask建立网站时间碰到了一个棘手的问题,就是在我进行操作日志的更新时间,发现表格建立有点错误,导致表缺失,从而报了下面的错误 sqlalchemy.exc.ProgrammingError ...

  10. webpack配置antd的按需加载

    安装babel-plugin-import插件.下面方法二选一,都可以实现antd的按需加载. 一.配置webpack.config.js文件 { test: /.jsx?$/, exclude: / ...