| cachedCount<sup>8+</sup> | number | 1 | Number of child components to be cached. |
| cachedCount<sup>8+</sup> | number | 1 | Number of child components to be cached. |
| disableSwipe<sup>8+</sup> | boolean | false | Whether to disable the swipe feature. |
| disableSwipe<sup>8+</sup> | boolean | false | Whether to disable the swipe feature. |
| curve<sup>8+</sup> | [Curve](ts-animatorproperty.md)\| Curves | Curve.Ease | Animation curve. The ease-in/ease-out curve is used by default. For details about common curves, see [Curve enums](ts-animatorproperty.md). You can also create custom curves ([interpolation curve objects](ts-interpolation-calculation.md)) by using APIs provided by the interpolation calculation module. |
| curve<sup>8+</sup> | [Curve](ts-animatorproperty.md)\| Curves | Curve.Ease | Animation curve. The ease-in/ease-out curve is used by default. For details about common curves, see [Curve enums](ts-animatorproperty.md). You can also create custom curves ([interpolation curve objects](ts-interpolation-calculation.md)) by using APIs provided by the interpolation calculation module. |
| indicatorStyle<sup>8+</sup> | {<br/>left?: Length,<br/>top?: Length,<br/>right?: Length,<br/>bottom?: Length,<br/>size?: Length,<br/>color?: Color,<br/>selectedColor?: Color<br/>} | - | Style of the navigation dots indicator.<br/>- **left**: distance between the navigation dots indicator and the left edge of the **\<Swiper>** component.<br/>- **top**: distance between the navigation dots indicator and the top edge of the **\<Swiper>** component.<br/>- **right**: distance between the navigation dots indicator and the right edge of the **\<Swiper>** component.<br/>- **bottom**: distance between the navigation dots indicator and the right edge of the **\<Swiper>** component.<br/>- **size**: diameter of the navigation dots indicator.<br/>- **color**: color of the navigation dots indicator.<br/>- **selectedColor**: color of the selected navigation dot. |
### SwiperController
## SwiperController
Controller of the **<Swiper\>** component. You can bind this object to the **<Swiper\>** component and use it to control page switching.
Controller of the **<Swiper\>** component. You can bind this object to the **<Swiper\>** component and use it to control page switching.
| Name | Description |
| Name | Description |
| -------- | -------- |
| -------- | -------- |
| showNext():void | Turns to the next page. |
| showNext():void | Turns to the next page. |
| showPrevious():void | Turns to the previous page. |
| showPrevious():void | Turns to the previous page. |
## Events
## Events
| Name | Description |
| Name | Description |
| -------- | -------- |
| -------- | -------- |
| onChange( index: number) => void | Triggered when the index of the currently displayed component changes. |
| onChange( index: number) => void | Triggered when the index of the currently displayed component changes. |
> - The build method must be defined for a custom component.
>
>
> - The **build** method must be defined for a custom component.
>
> - Custom constructors are prohibited for custom components.
> - Custom constructors are prohibited for custom components.
The following code illustrates how to create a custom component named MyComponent:
The following code illustrates how to create a custom component named **MyComponent**:
```
```
@Component
@Component
...
@@ -37,10 +38,10 @@ struct MyComponent {
...
@@ -37,10 +38,10 @@ struct MyComponent {
```
```
The build method of MyComponent is executed during initial rendering. When the component status changes, the build method will be executed again.
The **build** method of **MyComponent** is executed during initial rendering. When the component status changes, the build method will be executed again.
The following code illustrates how to use MyComponent:
The following code illustrates how to use **MyComponent**:
```
```
@Component
@Component
...
@@ -55,8 +56,7 @@ struct ParentComponent {
...
@@ -55,8 +56,7 @@ struct ParentComponent {
}
}
```
```
**MyComponent** can be applied multiple times and reused in different components, as shown in the code below:
MyComponent can be applied multiple times and reused in different components, as shown in the code below:
```
```
@Component
@Component
...
@@ -76,11 +76,11 @@ struct ParentComponent {
...
@@ -76,11 +76,11 @@ struct ParentComponent {
}
}
}
}
private aboutToAppear() {
aboutToAppear() {
console.log('ParentComponent: Just created, about to become rendered first time.')
console.log('ParentComponent: Just created, about to become rendered first time.')
}
}
private aboutToDisappear() {
aboutToDisappear() {
console.log('ParentComponent: About to be removed from the UI.')
console.log('ParentComponent: About to be removed from the UI.')