官方手册<slider>
官方手册<indicator>
特殊子组件
-
<indicator>：用于显示轮播图指示器效果，必须充当<slider>组件的子组件使用。
特性
<slider>
<indicator>
item-color {color}：设置项的颜色，可以是颜色的名称，例如 red；也可以是 16 进制的颜色，例如 #RRGGBB。
item-selected-color {color}：被选中时的颜色，可以是颜色的名称，red；也可以是 16 进制的颜色，例如 #RRGGBB。
item-size {number}：元素的个数。
事件
-
change: 当轮播索引改变时，触发该事件。事件中 event 对象属性：index：展示的图片索引
示例
<template>
<div>
<slider class="slider" interval="3000" auto-play="true">
<div class="frame" v-for="img in imageList">
<image class="image" resize="cover" :src="img.src"></image>
</div>
</slider>
</div>
</template>
<style scoped>
.image {
width: 700px;
height: 700px;
}
.slider {
margin-top: 25px;
margin-left: 25px;
width: 700px;
height: 700px;
border-width: 2px;
border-style: solid;
border-color: #41B883;
}
.frame {
width: 700px;
height: 700px;
position: relative;
}
</style>
<script>
export default {
data () {
return {
imageList: [
{ src: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
{ src: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'},
{ src: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'}
]
}
}
}
</script>
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];
}
- (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 <UIScrollViewDelegate>
@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
_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;
}
}
}
