Weex SDK中提供了下拉刷新和上拉加載的組件，但是功能比較單一，不能做到跟手滑動操作，還會導致weex刷新和原生刷新不統一的問題，所以最好的操作是擴展導出原生的刷新組件。
refresh組件是WeexSDK官方提供的，但是不好在這個組件內進行擴展，為了方便前端的使用和客戶端的擴展，最終在list組件的基礎上進行擴展，因為幾乎所有的刷新和加載都是基于list組件的。
iOS端
為了方便擴展，我選擇繼承官方的WXListComponent類，先整體了解一下整個類中的代碼
@interface MWSListComponent ()
@property (nonatomic, strong) MJRefreshGifHeader *refreshHeader;
@property (nonatomic, strong) MJRefreshAutoFooter *refreshFooter;
@property (nonatomic, assign) BOOL refresh; /**< 是否開啟下拉刷新 */
@property (nonatomic, assign) BOOL loading; /**< 是否開啟上拉加載 */
@property (nonatomic, assign) BOOL showLoading; /**< 控制loading是否顯示 */
@property (nonatomic, assign) BOOL refreshEvent;
@property (nonatomic, assign) BOOL loadingEvent;
@end
@implementation MWSListComponent
WX_EXPORT_METHOD(@selector(endRefreshing));
WX_EXPORT_METHOD(@selector(endLoading));
WX_EXPORT_METHOD(@selector(noticeNoMoreData));
- (void)dealloc
{
_refreshFooter = nil;
_refreshHeader = nil;
}
- (instancetype)initWithRef:(NSString *)ref type:(NSString *)type styles:(NSDictionary *)styles attributes:(NSDictionary *)attributes events:(NSArray *)events weexInstance:(WXSDKInstance *)weexInstance
{
self = [super initWithRef:ref type:type styles:styles attributes:attributes events:events weexInstance:weexInstance];
if (self) {
_refresh = [WXConvert BOOL:attributes[@"refresh"]];
_loading = [WXConvert BOOL:attributes[@"loading"]];
_showLoading = [attributes.allKeys containsObject:@"showLoading"] ? [WXConvert BOOL:attributes[@"showLoading"]] : YES;
}
return self;
}
- (void)viewDidLoad
{
[super viewDidLoad];
[self _updateRefreshHeader];
[self _updateRefreshFooter];
[self _updateLoadingState];
}
- (void)addEvent:(NSString *)eventName
{
[super addEvent:eventName];
if ([eventName isEqualToString:@"refresh"]) {
_refreshEvent = YES;
}
if ([eventName isEqualToString:@"loading"]) {
_loadingEvent = YES;
}
}
- (void)removeEvent:(NSString *)eventName
{
[super removeEvent:eventName];
if ([eventName isEqualToString:@"refresh"]) {
_refreshEvent = NO;
}
if ([eventName isEqualToString:@"loading"]) {
_loadingEvent = NO;
}
}
- (void)updateAttributes:(NSDictionary *)attributes
{
[super updateAttributes:attributes];
if ([attributes.allKeys containsObject:@"refresh"]) {
_refresh = [WXConvert BOOL:attributes[@"refresh"]];
[self _updateRefreshHeader];
}
if ([attributes.allKeys containsObject:@"loading"]) {
_loading = [WXConvert BOOL:attributes[@"loading"]];
[self _updateRefreshFooter];
}
if ([attributes.allKeys containsObject:@"showLoading"]) {
_showLoading = [WXConvert BOOL:attributes[@"showLoading"]];
[self _updateLoadingState];
}
}
#pragma mark - Private Method
- (void)_addRefreshHeader
{
if (!_refreshHeader) {
__weak typeof(self) weakSelf = self;
_refreshHeader = [MJRefreshGifHeader headerWithRefreshingBlock:^{
[weakSelf refreshData];
}];
UIScrollView *scrollView = (UIScrollView *)self.view;
scrollView.header = _refreshHeader;
}
}
- (void)refreshData
{
if (_refreshEvent) {
[self fireEvent:@"refresh" params:nil];
}
}
- (void)_removeRefreshHeader
{
if (_refreshHeader) {
UIScrollView *scrollView = (UIScrollView *)self.view;
scrollView.header = nil;
_refreshHeader = nil;
}
}
- (void)_addRefreshFooter
{
if (!_refreshFooter) {
__weak typeof(self) weakSelf = self;
_refreshFooter = [MDRefreshAutoFooter footerWithRefreshingBlock:^{
[weakSelf loadingData];
}];
UIScrollView *scrollView = (UIScrollView *)self.view;
scrollView.footer = _refreshFooter;
[self _updateLoadingState];
}
}
- (void)loadingData
{
if (_loadingEvent) {
[self fireEvent:@"loading" params:nil];
}
}
- (void)_removeRefreshFooter
{
if (_refreshFooter) {
UIScrollView *scrollView = (UIScrollView *)self.view;
scrollView.footer = nil;
_refreshFooter = nil;
}
}
- (void)_updateRefreshHeader
{
if (_refresh) {
[self _addRefreshHeader];
}
else {
[self _removeRefreshHeader];
}
}
- (void)_updateRefreshFooter
{
if (_loading) {
[self _addRefreshFooter];
}
else {
[self _removeRefreshFooter];
}
}
- (void)_updateLoadingState
{
self.refreshFooter.hidden = !_showLoading;
}
#pragma mark - JS call method
- (void)endRefreshing
{
if (_refreshHeader) {
UIScrollView *scrollView = (UIScrollView *)self.view;
[scrollView.header endRefreshing];
[UIView animateWithDuration:0.4 animations:^{ [(UIScrollView *)self.view setContentOffset:CGPointZero]; }];
}
}
- (void)endLoading
{
if (_refreshFooter) {
UIScrollView *scrollView = (UIScrollView *)self.view;
[scrollView.footer endRefreshing];
scrollView.footer.hidden = YES;
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.25 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
scrollView.footer.hidden = NO;
});
}
}
- (void)noticeNoMoreData
{
if (_refreshFooter) {
UIScrollView *scrollView = (UIScrollView *)self.view;
[scrollView.footer noticeNoMoreData];
}
}
@end
refresh {boolean}: 可選值為true/false,默認是false。此值決定 list 是否開啟下拉刷新功能。
loading {boolean}:可選值為true/false,默認是false。此值決定 list 是否開啟上拉加載功能。
下拉刷新的時候，會觸發list組件的refresh方法，上拉加載的時候，會觸發list組件的loading方法。當數據返回的時候，我們需要手動去關閉刷新或者加載，因為數據什么時候回來只有weex端才知道，所以擴展了一下幾個方法：
WX_EXPORT_METHOD(@selector(endRefreshing)); // 停止刷新
- (void)endRefreshing
{
if (_refreshHeader) {
UIScrollView *scrollView = (UIScrollView *)self.view;
[scrollView.header endRefreshing];
// weex在調用停止刷新后，scroll并不會回到頂部，需要我們手動進行設置一下。
[UIView animateWithDuration:0.4 animations:^{ [(UIScrollView *)self.view setContentOffset:CGPointZero]; }];
}
}
WX_EXPORT_METHOD(@selector(endLoading)); // 停止上拉加載
- (void)endLoading
{
if (_refreshFooter) {
UIScrollView *scrollView = (UIScrollView *)self.view;
[scrollView.footer endRefreshing];
scrollView.footer.hidden = YES;
// 此處的處理因為數據返回時候，weex的render需要一定的時間，所有絕大部分時候，是先看到footer，然后cell才會一個一個進行渲染，所以此處先隱藏footer，0.25s之后再顯示
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.25 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
scrollView.footer.hidden = NO;
});
}
}
當沒有更多數據的時候，我們可以調用這個方法進行設置
WX_EXPORT_METHOD(@selector(noticeNoMoreData)); // 提示沒有更多數據了
- (void)noticeNoMoreData
{
if (_refreshFooter) {
UIScrollView *scrollView = (UIScrollView *)self.view;
[scrollView.footer noticeNoMoreData];
}
}
前端
在設置樣式的模塊代碼如下
<template>
<div>
<list
ref="list"
refresh="true"
@refresh="_refreshData"
loading="true"
@loading="_loadingData"
>
</list>
</div>
</template>
ref為了拿到list組件，上述代碼開啟了上拉加載和下拉刷新的功能，下面是script模塊的代碼
<script>
export default {
methods: {
_refreshData() {
this._fetchData(true)
},
_loadingData() {
this._fetchData(false)
},
_fetchData(isRefresh) {
// 請求數據，結束后
if (_platform==='iOS') {
let list = this.$refs.list;
if (list) {
if (isRefresh) {
list.endRefreshing();
}
if (this.noMoreData) {
list.noticeNoMoreData();
} else {
list.endLoading();
}
}
}
}
}
}
</script>
通過上述操作，就可以將原生的代碼橋接到weex中使用啦。
