apicloud apicloud

注册
查看: 9584|回复: 101

[模块教程] UIPullRefresh 模块(下拉刷新)demo示例

 
回帖奖励 5 云币
回复本帖可获得 1 云币奖励! 每人限 1 次

主题:
1066
帖子:
4781
云币:
2147219995

圣诞节捣蛋鬼APICloud大会专属勋章足球狗儿童节快乐

[模块教程] UIPullRefresh 模块(下拉刷新)demo示例

 
9584 101 | 发表于 2017-8-1 10:53:07 |阅读模式 | |
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 方法,具体效果你下载源码来试试。






主题:
233
帖子:
1618
云币:
4482

APICloud粉丝端午节APICloud毕业勋章APICloud骨灰粉一周年中秋节社会摇你吃屎!首长好!托马斯全旋女朋友足球狗儿童节快乐

发表于 2017-8-1 12:07:22 |

回帖奖励 +1 云币

抢沙发。回帖拿金币,支持支持
APP、小程序、公众号、企业官网项目合作请点击QQ:1424445608

主题:
1
帖子:
30
云币:
6
发表于 2017-8-1 12:34:45 来自手机 |

回帖奖励 +1 云币

回帖拿金币,支持支持

新手上路

UID:517796

主题:
5
帖子:
99
云币:
417
发表于 2017-8-1 15:07:22 |

回帖奖励 +1 云币

回帖拿金币,支持支持

马路杀手

UID:219869

主题:
15
帖子:
245
云币:
434
发表于 2017-8-1 15:07:42 |

回帖奖励 +1 云币

感谢 分享,学习中

主题:
31
帖子:
97
云币:
165

APICloud粉丝

发表于 2017-8-1 17:27:00 |

回帖奖励 +1 云币


回帖拿金币,支持支持

主题:
33
帖子:
1204
云币:
16238

我李白贼6

发表于 2017-8-2 05:38:50 |

回帖奖励 +1 云币

先收藏

主题:
44
帖子:
301
云币:
104

超人

发表于 2017-8-2 15:58:28 |

回帖奖励 +1 云币

支持一下拿云币,要是有更多的例子就好了

主题:
99
帖子:
378
云币:
302

APICloud粉丝女朋友强者王者不觉明厉

发表于 2017-8-3 14:04:12 |

回帖奖励 +1 云币

帖拿金币,支持支持

主题:
75
帖子:
604
云币:
792
发表于 2017-8-3 14:20:58 |

回帖奖励 +1 云币

支持一下,拿云币
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表