UIPullRefreshFlash模块demo示例

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

详见模块文档:https://docs.apicloud.com/Cli...前端

使用攻略:
①对于 APICloud 平台上的普通模块,在相应接口调用前须要先require该模块,但因为本模块是基于引擎下拉刷新功能扩展的模块,因此本模块使用方法比较特殊。能够没必要require模块,改成在 config.xml 文件内配置模块。
config.xml 文件配置示例以下:
<preference name="customRefreshHeader" value="UIPullRefreshFlash"/>
复制代码
在 config.xml 配置后,则本模块为全局对象,能够在任意可弹动的窗体(frame、window)中调用 api.setCustomRefreshHeaderInfo 接口设置该下拉刷新样式,以及开始、中止刷新加载状态(api.refreshHeaderLoading、api.refreshHeaderLoadDone)。api

②若想在不一样的 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:配置下拉刷新样式;app

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

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

本文出自APICloud官方论坛,感谢论坛版主粉红顽皮新的分享。url

相关文章
相关标签/搜索