官方手冊(cè)-loading

官方手冊(cè)-refresh

• <loading> 為 <scroller>和 <list> 提供上拉加載功能。 是<scroller> 和 <list>的子組件惊豺，且只能在被<scroller> 和 <list> 包含時(shí)才能被正確的渲染。

• <refresh> 為 <scroller> 和<list> 提供下拉加載功能禽作。是<scroller> 和 <list> 的子組件尸昧，且只能在被 <scroller> 和 <list> 包含時(shí)才能被正確的渲染。

子組件

• <text>：文字
• <image>：icon
• <loading-indicator>: 默認(rèn)的動(dòng)畫效果旷偿。

特性

• display {string}：可選值為show 或者 hide烹俗，僅隱藏 <indicator>，其他子組件依然可見萍程，loading 事件仍會(huì)被觸發(fā)幢妄。

事件

• loading：加載時(shí)被觸發(fā)。

• refresh：被下拉時(shí)觸發(fā)茫负。

示例

<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是內(nèi)建的子組件

@property (nonatomic, weak) WXLoadingIndicator *indicator;

• 至于<text>和<image>蕉鸳，在源碼中并沒有涉及，是組件基類提供的嵌套功能朽褪。加入其它的組件比如<switch>也未嘗不可置吓，只是從語義上加入<text>和<image>作為子組件比較有意義。

• 通過一個(gè)邏輯變量控制缔赠，只處理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];
}

• 內(nèi)部用了一個(gè)邏輯變量存儲(chǔ)display的設(shè)置衍锚，控制“小轉(zhuǎn)轉(zhuǎn)”的顯示和隱藏

@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>等組件中使用“小轉(zhuǎn)轉(zhuǎn)”，是用了父類的一個(gè)內(nèi)部函數(shù)：判斷是否遵循WXScrollerProtocol協(xié)議

- (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的實(shí)現(xiàn)思路跟這個(gè)非常類似

小轉(zhuǎn)轉(zhuǎn)

• 手冊(cè)中沒有<loading-indicator>標(biāo)簽嗤堰，但是在SDK中已經(jīng)注冊(cè)戴质，也是一個(gè)組件，應(yīng)該是可以用的踢匣。只是從語義上來說沒有實(shí)際意義告匠。

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

• 跟標(biāo)簽indicator>是不同的，兩者對(duì)應(yīng)的實(shí)現(xiàn)類不一樣离唬。這個(gè)是輪播的指示器后专，那個(gè)劃一下圖片，會(huì)動(dòng)的“小點(diǎn)點(diǎn)”输莺。而這個(gè)是“小轉(zhuǎn)轉(zhuǎn)”戚哎。

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

• 采用了系統(tǒng)控件實(shí)現(xiàn)

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

• 可以設(shè)置顏色

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