Weex官方文档提供了下拉刷新和上拉刷新的内建组件<refresh>和<loading>。但是功能单一且和App中原生的下拉刷新样式不一样，只能抛弃了。而前端自己写组件，效果也很难和原生保持一致。
<refresh>组件在iOS的WeexSDK源码中，由WXRefreshComponent类创建得到。但是不太好在这里扩展代码。因为下拉刷新需要和UIScrollView相关联。
而UIScrollView在weex中就是<scroll>组件，源码在WXScrollerComponent。为了不破坏WeexSDK源码，在这个类上进行扩展，参考MJRefresh的用法，给UIScrollView加上header和footer实现下拉和上拉刷新功能。
前端
为了尽可能方便调用，这样设计。
<list @refresh="refresh" @loading="onloading" :loading-display="loadingDisplay" :refresh-display="refreshDisplay">
</list>
@refresh和@loading是vue的语法，意思是给list标签添加事件，等号后面的就是函数名，下拉的时候触发refresh函数，上拉的时候触发loading函数。（由原生去触发事件）
:loading-display和:refresh-display是list的属性，用于停止下拉刷新控件。（前端去通知原生关闭动画）
iOS
+ (void)load {
[self weex_swizzle:[self class] Method:@selector(initWithRef:type:styles:attributes:events:weexInstance:) withMethod:@selector(new_initWithRef:type:styles:attributes:events:weexInstance:)];
[self weex_swizzle:[self class] Method:@selector(updateAttributes:) withMethod:@selector(new_updateAttributes:)];
[self weex_swizzle:[self class] Method:@selector(viewDidLoad) withMethod:@selector(new_viewDidLoad)];
}
新建一个WXScrollerComponent分类，拦截几个需要的方法。第1个方法在初使化组件的时候执行，可以拿到组件的样式、属性、事件、实例。第2个方法会在前端更新组件属性时执行。
-(instancetype)new_initWithRef:(NSString *)ref type:(NSString *)type styles:(NSDictionary *)styles attributes:(NSDictionary *)attributes events:(NSArray *)events weexInstance:(WXSDKInstance *)weexInstance {
id ret = [self new_initWithRef:ref type:type styles:styles attributes:attributes events:events weexInstance:weexInstance];
for (NSString *e in events) {
if ([e isEqualToString:@"refresh"]) {
self.headerExist = YES;
}
if ([e isEqualToString:@"loading"]) {
self.footerExist = YES;
}
}
return ret;
}
- (void)setHeaderExist:(BOOL)headerExist {
objc_setAssociatedObject(self, @selector(headerExist), @(headerExist), OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}
- (BOOL)headerExist {
return [objc_getAssociatedObject(self, _cmd) boolValue];
}
- (void)setFooterExist:(BOOL)footerExist {
objc_setAssociatedObject(self, @selector(footerExist), @(footerExist), OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}
- (BOOL)footerExist {
return [objc_getAssociatedObject(self, _cmd) boolValue];
}
判断组件是否存在refresh和loading事件，后面会根据这个来判断是否使用下拉刷新和上拉刷新功能。
- (void)new_updateAttributes:(NSDictionary *)attributes {
[self new_updateAttributes:attributes];
if (attributes[@"refreshDisplay"]) {
if ([attributes[@"refreshDisplay"] isEqualToString:@"hide"]) {
[(UIScrollView *)self.view headerStopRefresh];
[UIView animateWithDuration:0.4 animations:^{
[(UIScrollView *)self.view setContentOffset:CGPointZero];
}];
}
}
if (attributes[@"loadingDisplay"]) {
if ([attributes[@"loadingDisplay"] isEqualToString:@"hide"]) {
[(UIScrollView *)self.view footerStopRefresh];
}
}
}
前端把refresh-display改成hide时，原生停止下拉刷新。
前端把loading-display改成hide时，原生停止上拉刷新。
（前端中-会自动转化成iOS中的驼峰）
- (void)new_viewDidLoad {
[self new_viewDidLoad];
if (self.headerExist) {
MJRefreshNormalHeader *header = [MJRefreshNormalHeader headerWithRefreshingTarget:self refreshingAction:@selector(refresh)];
[(UIScrollView *)self.view setMj_header:header];
}
if (self.footerExist) {
MJRefreshAutoNormalFooter *footer = [MJRefreshAutoNormalFooter footerWithRefreshingTarget:self refreshingAction:@selector(loading)];
[(UIScrollView *)self.view setMj_footer:footer];
}
}
给UIScrollView加上下拉刷新和上拉刷新功能。
- (void)refresh {
[self fireEvent:@"refresh" params:nil];
}
- (void)loading {
[self fireEvent:@"loading" params:nil];
}
在下拉和上拉时，调用前端的相应函数，这里不需要参数。
还是把文件传上来吧，免的大家留邮箱了。。
分类下载地址
