官方手册-loading

官方手册-refresh

• <loading> 为 <scroller>和 <list> 提供上拉加载功能。 是<scroller> 和 <list>的子组件，且只能在被<scroller> 和 <list> 包含时才能被正确的渲染。

• <refresh> 为 <scroller> 和<list> 提供下拉加载功能。是<scroller> 和 <list> 的子组件，且只能在被 <scroller> 和 <list> 包含时才能被正确的渲染。

子组件

• <text>：文字
• <image>：icon
• <loading-indicator>: 默认的动画效果。

特性

• display {string}：可选值为show 或者 hide，仅隐藏 <indicator>，其他子组件依然可见，loading 事件仍会被触发。

事件

• loading：加载时被触发。

• refresh：被下拉时触发。

示例

<template>
  <scroller class="scroller">
    <div class="cell" v-for="num in lists">
      <div class="panel">
        <text class="text">{{num}}</text>
      </div>
    </div>
    <loading class="loading" @loading="onloading" :display="showLoading">
      <text class="indicator">Loading ...</text>
    </loading>
  </scroller>
</template>
<script>
  const modal = weex.requireModule('modal')
  const LOADMORE_COUNT = 4
  export default {
    data () {
      return {
        showLoading: 'hide',
        lists: [1, 2, 3, 4, 5]
      }
    },
    methods: {
      onloading (event) {
        modal.toast({ message: 'loading', duration: 1 })
        this.showLoading = 'show'
        setTimeout(() => {
          const length = this.lists.length
          for (let i = length; i < length + LOADMORE_COUNT; ++i) {
            this.lists.push(i + 1)
          }
          this.showLoading = 'hide'
        }, 1500)
      }
    }
  }
</script>
<style scoped>
  .panel {
    width: 600px;
    height: 250px;
    margin-left: 75px;
    margin-top: 35px;
    margin-bottom: 35px;
    flex-direction: column;
    justify-content: center;
    border-width: 2px;
    border-style: solid;
    border-color: #DDDDDD;
    background-color: #F5F5F5;
  }
  .text {
    font-size: 50px;
    text-align: center;
    color: #41B883;
  }
  .loading {
    justify-content: center;
  }
  .indicator {
    color: #888888;
    font-size: 42px;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
  }
</style>

SDK源码

• 组件类：WXLoadingComponent

[self registerComponent:@"loading" withClass:NSClassFromString(@"WXLoadingComponent")];

• loading-indicator是内建的子组件

@property (nonatomic, weak) WXLoadingIndicator *indicator;

• 至于<text>和<image>，在源码中并没有涉及，是组件基类提供的嵌套功能。加入其它的组件比如<switch>也未尝不可，只是从语义上加入<text>和<image>作为子组件比较有意义。

• 通过一个逻辑变量控制，只处理loading事件

@property (nonatomic) BOOL loadingEvent;

- (void)addEvent:(NSString *)eventName
{
    if ([eventName isEqualToString:@"loading"]) {
        _loadingEvent = YES;
    }
}

- (void)removeEvent:(NSString *)eventName
{
    if ([eventName isEqualToString:@"loading"]) {
        _loadingEvent = NO;
    }
}

- (void)loading
{
    if (!_loadingEvent)
        return;
    
    [self fireEvent:@"loading" params:nil];
}

• 内部用了一个逻辑变量存储display的设置，控制“小转转”的显示和隐藏

@property (nonatomic) BOOL displayState;

if (attributes[@"display"]) {
    if ([attributes[@"display"] isEqualToString:@"show"]) {
        _displayState = YES;
    } else if ([attributes[@"display"] isEqualToString:@"hide"]){
        _displayState = NO;
    } else {
        WXLogError(@"");
    }
}

- (void)setDisplay
{
    id<WXScrollerProtocol> scrollerProtocol = [self ancestorScroller];
    if (scrollerProtocol == nil || !_initFinished)
        return;
    WXComponent *scroller = (WXComponent*)scrollerProtocol;
    CGPoint contentOffset = [scrollerProtocol contentOffset];
    if (_displayState) {
        contentOffset.y = [scrollerProtocol contentSize].height - scroller.calculatedFrame.size.height + self.calculatedFrame.size.height;
        [scrollerProtocol setContentOffset:contentOffset animated:NO];
        [_indicator start];
    } else {
        _displayState = NO;
        contentOffset.y = contentOffset.y - self.calculatedFrame.size.height;
        [scrollerProtocol setContentOffset:contentOffset animated:YES];
        [_indicator stop];
    }
}

• 至于只能在<scroller> <list>等组件中使用“小转转”，是用了父类的一个内部函数：判断是否遵循WXScrollerProtocol协议

- (id<WXScrollerProtocol>)ancestorScroller
{
    if(!_ancestorScroller){
        WXComponent *supercomponent = self.supercomponent;
        while (supercomponent) {
            if([supercomponent conformsToProtocol:@protocol(WXScrollerProtocol)]){
                _ancestorScroller = (id<WXScrollerProtocol>)supercomponent;
                break;
            }
            supercomponent = supercomponent.supercomponent;
        }
    }
    
    return _ancestorScroller;
}

• WXRefreshComponent的实现思路跟这个非常类似

小转转

• 手册中没有<loading-indicator>标签，但是在SDK中已经注册，也是一个组件，应该是可以用的。只是从语义上来说没有实际意义。

[self registerComponent:@"loading-indicator" withClass:NSClassFromString(@"WXLoadingIndicator")];

• 跟标签indicator>是不同的，两者对应的实现类不一样。这个是轮播的指示器，那个划一下图片，会动的“小点点”。而这个是“小转转”。

[self registerComponent:@"indicator" withClass:NSClassFromString(@"WXIndicatorComponent")];

• 采用了系统控件实现

@interface WXLoadingIndicator()
@property (nonatomic, strong) UIActivityIndicatorView* indicator;
@end

• 可以设置颜色

if (styles[@"color"]) {
    [self setColor:[WXConvert UIColor:styles[@"color"]]];
}