You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
|
|
# 组件化开发
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 轮播组件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 自定义构建函数（结构、样式、事件）
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
