Weex组件：<slider><indicator>

官方手册

组件用于在一个页面中展示多个图片，在前端，这种效果被称为轮播图。
组件用于显示轮播图指示器效果，必须充当组件的子组件使用。

特殊子组件

：用于显示轮播图指示器效果，必须充当组件的子组件使用。

特性

auto-play {boolean}：可选值为true/false，默认的是 false。该值决定是否自动播放轮播。
interval {number}：值为毫秒数，此值设定slider 切换时间间隔。当 auto-play值为 true 时生效。

item-color {color}：设置项的颜色，可以是颜色的名称，例如 red；也可以是 16 进制的颜色，例如 #RRGGBB。
item-selected-color {color}：被选中时的颜色，可以是颜色的名称，red；也可以是 16 进制的颜色，例如 #RRGGBB。
item-size {number}：元素的个数。

事件

change: 当轮播索引改变时，触发该事件。事件中 event 对象属性：index：展示的图片索引

示例

SDK 源码

组件类：WXSliderComponent WXIndicatorComponent

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

index应该也可以在外部设置，手册中没有写出来。展示图片的索引。

`WXSliderComponent`

if (attributes[@"autoPlay"]) {
    _autoPlay = [attributes[@"autoPlay"] boolValue];
}

if (attributes[@"interval"]) {
    _interval = [attributes[@"interval"] integerValue];
}

if (attributes[@"index"]) {
    _index = [attributes[@"index"] integerValue];
}

滑动到某张图片的时候发送事件change

- (void)sliderView:(WXSliderView *)sliderView didScrollToItemAtIndex:(NSInteger)index
{
    self.currentIndex = index;
    
    if (_sliderChangeEvent) {
        [self fireEvent:@"change" params:@{@"index":@(index)} domChanges:@{@"attrs": @{@"index": @(index)}}];
    }
}

内部用了个定时器来处理自动轮播，并且注意到了定时器的模式问题，滑动时也不影响定时器工作

- (void)_startAutoPlayTimer
{
    if (!self.autoTimer || ![self.autoTimer isValid]) {
        __weak __typeof__(self) weakSelf = self;
        self.autoTimer = [NSTimer wx_scheduledTimerWithTimeInterval:_interval/1000.0f block:^() {
            [weakSelf _autoPlayOnTimer];
        } repeats:YES];
        [[NSRunLoop currentRunLoop] addTimer:self.autoTimer forMode:NSRunLoopCommonModes];
    }
}

- (void)_stopAutoPlayTimer
{
    if (self.autoTimer && [self.autoTimer isValid]) {
        [self.autoTimer invalidate];
        self.autoTimer = nil;
    }
}

用了一个内部类来处理轮播的具体事情

typedef enum
{
    WXPointIndicatorAlignCenter,    // point indicator align center
    WXPointIndicatorAlignLeft,      // point indicator align left
    WXPointIndicatorAlignRight,     // point indicator align right
} WXPointIndicatorAlignStyle;

@interface WXIndicatorView : UIView

@property (nonatomic, assign)   NSInteger   pointCount;         // total count point of point indicator
@property (nonatomic, assign)   NSInteger   currentPoint;       // current light index of point at point indicator
@property (nonatomic, strong)   UIColor *pointColor;        // normal point color of point indicator
@property (nonatomic, strong)   UIColor *lightColor;        // highlight point color of point indicator
@property (nonatomic, assign)   WXPointIndicatorAlignStyle  alignStyle;    //align style of point indicator
@property (nonatomic, assign)   CGFloat pointSize;          // point size of point indicator
@property (nonatomic, assign)   CGFloat pointSpace;         // point space of point indicator

@end

轮播图也是通过UIScrollView实现的，经典做法，基本上都这么干

@interface WXSliderView : UIView 

@property (nonatomic, strong) WXIndicatorView *indicator;
@property (nonatomic, strong) UIScrollView *scrollView;
@property (nonatomic, strong) NSMutableArray *itemViews;
@property (nonatomic, assign) NSInteger currentIndex;

@end

`WXIndicatorComponent`

只是一个容器，真正的工作在内部类WXIndicatorView中

@interface WXIndicatorComponent()
@property (nonatomic, strong) WXIndicatorView *indicatorView;
@end

3个标签属性都有默认值，不设置也没有关系

_itemColor = styles[@"itemColor"] ? [WXConvert UIColor:styles[@"itemColor"]]:[UIColor colorWithRed:0xff/255.0f green:0xff/255.0f blue:0xff/255.0f alpha:0.5f];
_itemSelectedColor = styles[@"itemSelectedColor"] ? [WXConvert UIColor:styles[@"itemSelectedColor"]]:[UIColor colorWithRed:0xff/255.0f green:0xd5/255.0f blue:0x45/255.0f alpha:1.0f];
_itemSize = styles[@"itemSize"] ? [WXConvert WXPixelType:styles[@"itemSize"]] : 5.0f;

指示器视图的几个小点并没有系统控件，而是通过画出来的，比较复杂的位置控制

- (void)drawRect:(CGRect)rect
{
    if (self.alignStyle == WXPointIndicatorAlignCenter) {
        CGFloat startX = 0.0f, centerX = self.frame.size.width / 2.0f;
        if (self.pointCount % 2) {
            startX = centerX - (self.pointSize + self.pointSpace) * (int)(self.pointCount / 2.0f) - self.pointSize / 2.0f;
        } else {
            startX = centerX - (self.pointSize + self.pointSpace) * (int)(self.pointCount / 2.0f) +  self.pointSpace / 2.0f;   
        }
        
        CGContextRef context=UIGraphicsGetCurrentContext();
        CGContextBeginPath(context);
        
        for (int i = 0; i < self.pointCount; i++) {
            if (self.currentPoint == i) {
                CGContextSetFillColorWithColor(context, self.lightColor.CGColor);
                CGContextAddEllipseInRect(context, CGRectMake(startX, (self.frame.size.height - self.pointSize) / 2.0f, self.pointSize, self.pointSize));
                CGContextFillPath(context);
            } else {
                CGContextSetFillColorWithColor(context, self.pointColor.CGColor);
                CGContextAddEllipseInRect(context, CGRectMake(startX, (self.frame.size.height - self.pointSize) / 2.0f, self.pointSize, self.pointSize));
                CGContextFillPath(context);
            }
            startX += self.pointSize + self.pointSpace;
        }
    } else if (self.alignStyle == WXPointIndicatorAlignRight) {
        CGFloat startX = self.frame.size.width - self.pointSize * self.pointCount - self.pointSpace * (self.pointCount - 1) - 10;   //10 right margin
        CGContextRef context=UIGraphicsGetCurrentContext();
        CGContextBeginPath(context);
        
        for(int i = 0; i < self.pointCount; i++) {
            if (self.currentPoint == i) {
                CGContextSetFillColorWithColor(context, self.lightColor.CGColor);
                CGContextAddEllipseInRect(context, CGRectMake(startX, (self.frame.size.height - self.pointSize) / 2.0f, self.pointSize, self.pointSize));
                CGContextFillPath(context);
            } else {
                CGContextSetFillColorWithColor(context, self.pointColor.CGColor);
                CGContextAddEllipseInRect(context, CGRectMake(startX, (self.frame.size.height - self.pointSize) / 2.0f, self.pointSize, self.pointSize));
                CGContextFillPath(context);
            }
            startX += self.pointSize + self.pointSpace;
        }
    } else if (self.alignStyle == WXPointIndicatorAlignLeft) {
        CGFloat startX = 10.0f;   //10 left margin
        CGContextRef context=UIGraphicsGetCurrentContext();
        CGContextBeginPath(context);
        for(int i = 0; i < self.pointCount; i++) {
            if (self.currentPoint == i) {
                CGContextSetFillColorWithColor(context, self.lightColor.CGColor);
                CGContextAddEllipseInRect(context, CGRectMake(startX, (self.frame.size.height - self.pointSize) / 2.0f, self.pointSize, self.pointSize));
                CGContextFillPath(context);
            } else {
                CGContextSetFillColorWithColor(context, self.pointColor.CGColor);
                CGContextAddEllipseInRect(context, CGRectMake(startX, (self.frame.size.height - self.pointSize) / 2.0f, self.pointSize, self.pointSize));
                CGContextFillPath(context);
            }
            startX += self.pointSize + self.pointSpace;
        }
    }
}

Weex组件：

特殊子组件

特性

事件

示例

SDK 源码

WXSliderComponent

WXIndicatorComponent

你可能感兴趣的:(Weex组件：)

`WXSliderComponent`

`WXIndicatorComponent`