UIPullRefresh 模块对引擎新推出的下拉刷新接口进行了一层封装，App 可以通过此模块来实现带炫酷动画效果的下拉刷新功能。
点击进入模块详情
这是一个以《美团》中，下拉酷似动画的萌萌着小人儿效果作为参考，来实现的一个加载模块。这个效果实际是使用关键帧（即多张具有微小差别的图片）来完成完整的动画过程，此分享就拿这个小人儿作为实例分享给大家。基于这个效果大家可以在这之上再去做更复杂、更炫的效果，让你的应用更加的高炫拽。 按照官方对此模块的概述，所以这里我使用了 window + frame 的布局，如果你只是使用在独立的 window 布局，那么就需要在 config.xml 中配置 <preference name="customRefreshHeader' value="模块名称'/>。 在 index.html 中使用 openFrame 打开 main.html，这个地方需要特别注意，此模块与其他模块引入方式不同，是不需要使用 require 去引用的，只需要在打开 openFrame 时，在其配置中新增 customRefreshHeader 字段即可，此字段接收一个字符串，因为使用 UIPullRefresh 模块，所以填写模块名就行。 在 main.html 初始化的 apiready 时使用 setCustomRefreshHeaderInfo 方法初始化好它的 UI( 当然你可以在任何你需要的时候在初始化加载 UI )，该方法接收两个值，即参数与刷新完成后的回调。参数中的 transform 数组就是下拉过程中的图组，下拉会有一个固定的最大高度，模块实际就是将这组图片平均拆分到了各个高度的显示，所以你的图越多动画帧越细，则效果越流畅。load 这个字段是下拉为加载状态时的关键帧切换的图片，同上，也是图越多动画帧越细则效果越流畅。灰常重要的提醒：所有图片都要以正方形作为素材，否则会引起变现、失真等情况！官方推荐使用 5050、100100 尺寸图片。 当下拉为刷新加载状态时，会触发 setCustomRefreshHeaderInfo 方法的回调，这时就需要你去回调中做你的数据逻辑，最后当你确定数据加载完成，则调用 refreshHeaderLoadDone 方法结束加载，我这里用 3 秒定时器代替数据加载。 很多场景需要程序自动刷新，所以此模块也提供了 refreshHeaderLoading 方法，具体效果你下载源码来试试。
|
[复制链接]
显示全部楼层
QQ空间
新浪微博
微信扫一扫
