# 组件化开发



### 轮播组件Swiper

Swiper是一个容器组件，当设置了多个子组件后，可以对这些子组件进行轮播显示

```
Swiper(){
//轮播内容
}
.width()
.height()
//会自动拉伸轮播内容的大小
Column(){
     Swiper(){
       Text('1')
         .backgroundColor(Color.Blue)
       Text('2')
         .backgroundColor(Color.Green)
       Text('3')
         .backgroundColor(Color.Orange)
     }
     .width('100%')
     .height(100)
   }
```



##### Swiper常见属性



|   属性   |  传值   |         作用          | 默认值 |
| :------: | :-----: | :-------------------: | :----: |
|   loop   | boolean |     是否开启循环      |  true  |
| autoPlay | boolean |     是否自动播放      | false  |
| interval | number  | 自动播放时间间隔（ms) |  3000  |
| vertical | boolean |     纵向滑动轮播      | false  |

##### Swiper指示器设置



```tsx
.indicator(
       Indicator.dot()//小圆点
         .itemWidth(10)//默认宽高，颜色
         //.itemHeight(20)
         //.color(Color.Black)
         .selectedItemWidth(30)//选中宽高，颜色
         //.selectedItemHeight(30)
         .selectedColor(Color.White)
     )
```



### 样式&结构重用

##### @Extend 扩展组件（样式、事件）

1. 全局
2. 要求统一组件
3. 格式：

```
@Extend(Text)//应用到哪一类组件
function text1(color: ResourceColor,txt: string)//传递参数
{
   //组件样式设置
  
}
```



##### @Styles 抽取通用属性、事件

1. 允许不同类型组件之间样式复用



##### @Builder 自定义构建函数（结构、样式、事件）