|
本人学生党一枚，最近闲的没事做，尝试了一个模块，附件是视频，有兴趣的可以弄一下
一直想做一个就像大众点评，猫眼电影以及美团那样的下拉刷新，然后还是根据下拉距离动态改变下拉图片的那种动态效果。 找了好久找到了一个模块，感觉蛮好用的，因为它是把正常的下拉刷新的图片从一个动态图改成了多个帧动画的组合。也就是说，想要实现一个动态图的效果就是将多个图片联合起来，这样就实现了。然后就是下拉时图片又小变大的那种效果，上网上查了一下，那个效果叫等比缩放效果。 具体方法是这样的
添加以下UIPullRefreshFlash 模块。这个模块是用来把一组图片变成一个动态图然后放入下拉刷新这个组件中的。在使用这个模块之前我大概的看了一下这个模块的文档，所以我用的结构是window+frame结构。因为是第三方的模块，所以需要在config中配置一下： <preference name="customRefreshHeader'value="模块名称'/>。模块名也就是UIPullRefreshFlash，填上就行了。 用起来发现，这个模块跟其他模块有一个很大的不同，这个不同点在于别的模块是需要用api.require(‘模块名’)来引用的，而UIPullRefreshFlash模块则不可以这么写。想要引用UIPullRefreshFlash这个模块，需要在打开 openFrame 时，在其配置中新增 customRefreshHeader 字段。而此字段接收一个字符串，因为使用 UIPullRefreshFlash 模块，所以填写模块名就行。 然后就是在页面初始化的 apiready 里面使用 setCustomRefreshHeaderInfo 方法初始化好它的 UI( 当然我个人认为你也可以在任何你需要的时候在初始化加载 UI，毕竟写一个程序时，自由度越高越好 )，这个方法会接收两个值，即参数与刷新完成后的回调。参数中的 icon 字符串字段就是下拉过程的中心展示图标，下拉会有一个固定的最大高度，在下拉小于最大高度的这个过程，图标周围会有一个随着高度切出的边线，需要注意的是为了保证图标居中以及不存在变形和失真的情况，官方文档推荐使用 50*50、100*100 尺寸图片
这个模块的方便就在于，不用自己去设置什么时候加载刷新状态，而是当下拉为刷新加载状态时，就会触发 setCustomRefreshHeaderInfo 方法的回调，剩下的就需要你自己去回调中做你的数据逻辑，最后当你确定数据加载完成，则调用 refreshHeaderLoadDone 方法结束加载。
当然，在现实开发中，会有很多场景需要程序自动刷新，所以这个模块也提供了 refreshHeaderLoading 方法，不过具体的我没有测试，我只是给大家推荐一下这个模块，剩下的看你自己咯。
|
[复制链接]
显示全部楼层
QQ空间
新浪微博
微信扫一扫
