Weex中调用原生下拉刷新

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];
}

在下拉和上拉时，调用前端的相应函数，这里不需要参数。

还是把文件传上来吧，免的大家留邮箱了。。
分类下载地址