Weex中调用原生下拉刷新

0.058字数 537阅读 2727

Weex官方文档提供了下拉刷新和上拉刷新的内建组件<refresh><loading>。但是功能单一且和App中原生的下拉刷新样式不一样,只能抛弃了。而前端自己写组件,效果也很难和原生保持一致。

<refresh>组件在iOS的WeexSDK源码中,由WXRefreshComponent类创建得到。但是不太好在这里扩展代码。因为下拉刷新需要和UIScrollView相关联。

UIScrollView在weex中就是<scroll>组件,源码在WXScrollerComponent。为了不破坏WeexSDK源码,在这个类上进行扩展,参考MJRefresh的用法,给UIScrollView加上headerfooter实现下拉和上拉刷新功能。


前端

为了尽可能方便调用,这样设计。

<list @refresh="refresh" @loading="onloading" :loading-display="loadingDisplay" :refresh-display="refreshDisplay">
</list>

@refresh@loading是vue的语法,意思是给list标签添加事件,等号后面的就是函数名,下拉的时候触发refresh函数,上拉的时候触发loading函数。(由原生去触发事件)
:loading-display:refresh-displaylist的属性,用于停止下拉刷新控件。(前端去通知原生关闭动画)

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

判断组件是否存在refreshloading事件,后面会根据这个来判断是否使用下拉刷新和上拉刷新功能。

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

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

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

推荐阅读更多精彩内容