UIPullRefreshFlash模块demo示例

最新推荐文章于 2023-10-24 17:19:45 发布

weixin_34221073

最新推荐文章于 2023-10-24 17:19:45 发布

阅读量56

点赞数

CC 4.0 BY-SA版权

文章标签：前端 ViewUI

原文链接：http://blog.51cto.com/9334358/2356913

UIPullRefreshFlash模块为APICloud引擎下拉刷新功能提供封装，实现带动画的下拉刷新。用户下拉时，模块调整图标大小并播放关键帧图片。达阈值后触发加载事件，模块播放加载动画，每帧间隔50毫秒，同时通知前端加载数据。数据加载完毕，调用接口结束刷新状态。

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 文件配置示例如下：

复制代码

在 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：手动停止下拉刷新的加载状态；

转载于:https://blog.51cto.com/9334358/2356913