1# Swiper 2 3 The **Swiper** component is able to display child components in a carousel-like manner. 4 5> **NOTE** 6> 7> - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8> 9> - The **Swiper** component incorporates a [PanGesture](ts-basic-gestures-pangesture.md) event that facilitates the swiping action to cycle through its child components. Setting [disableSwipe](#disableswipe8) to **true** will cancel the internal listening for the **PanGesture** event, disabling the swiping interaction. 10> 11> - When [NodeContainer](./ts-basic-components-nodecontainer.md) is reused in the **Swiper** component, recursive updates of parent component state variables by child nodes are prohibited. 12 13## Child Components 14 15Supported 16 17> **NOTE** 18> 19> - Allowed child component types: built-in and custom components, including rendering control types ([if/else](../../../ui/state-management/arkts-rendering-control-ifelse.md), [ForEach](../../../ui/state-management/arkts-rendering-control-foreach.md), [LazyForEach](../../../ui/state-management/arkts-rendering-control-lazyforeach.md), and [Repeat](../../../ui/state-management/arkts-new-rendering-control-repeat.md)). To maximize the benefits of lazy loading, avoid mixing lazy loading components (including **LazyForEach** and **Repeat**) and non-lazy loading components, and exercise caution when using multiple lazy loading components. Avoid modifying the data source while an animation is in progress, as doing so can lead to layout issues. 20> 21> - If a child component has its [visibility](ts-universal-attributes-visibility.md#visibility) attribute set to **Visibility.None** and the **Swiper** component has its **displayCount** attribute set to **'auto'**, the child component does not take up space in the viewport, but does not affect the number of navigation points. If a child component has its **visibility** attribute set to **Visibility.None** or **Visibility.Hidden**, it takes up space in the viewport, but is not displayed. 22> 23> - Child components of the **Swiper** component are drawn based on their level if they have the [offset](ts-universal-attributes-location.md#offset) attribute set. A child component with a higher level overwrites one with a lower level. For example, if the **Swiper** contains three child components and **offset({ x: 100 })** is set for the third child component, the third child component overwrites the first child component during horizontal loop playback. To prevent the first child component from being overwritten, set its [zIndex](ts-universal-attributes-z-order.md) attribute to a value greater than that of the third child component. 24> 25> - When focus is moved to a custom child node, navigation indicators and arrows may be obscured by [focus styles](../../../ui/arkts-common-events-focus-event.md#focus-style) modifications that change **zIndex**. 26> 27> - For a **Swiper** components with many child components, you can optimize the performance and reduce memory consumption by using lazy loading, data caching, preloading, and component reuse techniques. For best practices, see [Optimizing Frame Loss During Swiper Component Loading](https://developer.huawei.com/consumer/en/doc/best-practices/bpta-swiper_high_performance_development_guide). 28 29## APIs 30 31Swiper(controller?: SwiperController) 32 33Creates a **Swiper** component. 34 35**Widget capability**: This API can be used in ArkTS widgets since API version 10. 36 37**Atomic service API**: This API can be used in atomic services since API version 11. 38 39**System capability**: SystemCapability.ArkUI.ArkUI.Full 40 41**Parameters** 42 43| Name | Type | Mandatory | Description | 44| ---------- | ------------------------------------- | ---- | -------------------- | 45| controller | [SwiperController](#swipercontroller) | No | Controller to bind to the component to manage page switching and preload specific child components.| 46 47 48## Attributes 49 50In addition to the [universal attributes](ts-component-general-attributes.md), the following attributes are supported. 51 52> **NOTE** 53> 54> The default value of the universal attribute [clip](ts-universal-attributes-sharp-clipping.md) is **true** for the **Swiper** component. 55 56### index 57 58index(value: number) 59 60Sets the index of the child component currently displayed in the container. If the value is less than 0 or greater than or equal to the number of child components, the default value **0** is used. 61 62Since API version 10, this attribute supports two-way binding through [$$](../../../ui/state-management/arkts-two-way-sync.md). 63 64**Widget capability**: This API can be used in ArkTS widgets since API version 10. 65 66**Atomic service API**: This API can be used in atomic services since API version 11. 67 68**System capability**: SystemCapability.ArkUI.ArkUI.Full 69 70**Parameters** 71 72| Name| Type | Mandatory| Description | 73| ------ | ------ | ---- | ------------------------------------------------ | 74| value | number | Yes | Index of the child component currently displayed in the container.<br>Default value: **0**<br>**NOTE**<br>If the value specified is less than 0 or greater than the maximum page index, the value **0** is used.| 75 76### autoPlay 77 78autoPlay(value: boolean) 79 80Sets whether to enable automatic playback for child components, with the direction from the smallest to largest index. 81 82If [loop](#loop) is set to **false**, the automatic playback stops at the last page and resumes after navigated away from the last page using gestures. If the **Swiper** component becomes invisible, the playback stops. 83 84**Widget capability**: This API can be used in ArkTS widgets since API version 10. 85 86**Atomic service API**: This API can be used in atomic services since API version 11. 87 88**System capability**: SystemCapability.ArkUI.ArkUI.Full 89 90**Parameters** 91 92| Name| Type | Mandatory| Description | 93| ------ | ------- | ---- | -------------------------------------- | 94| value | boolean | Yes | Whether to enable automatic playback for child components.<br>Default value: **false** (automatic playback is disabled for child components).| 95 96### autoPlay<sup>18+</sup> 97 98autoPlay(autoPlay: boolean, options: AutoPlayOptions) 99 100Sets whether to enable automatic playback for child components, with **options** controlling whether child components stop automatic playback when the screen is pressed by fingers, a mouse device, or other input devices. 101 102If [loop](#loop) is set to **false**, automatic playback stops at the last page and resumes after navigated away from the last page using gestures. Automatic playback also stops when the **Swiper** component is not visible. 103 104**Widget capability**: This API can be used in ArkTS widgets since API version 18. 105 106**Atomic service API**: This API can be used in atomic services since API version 18. 107 108**System capability**: SystemCapability.ArkUI.ArkUI.Full 109 110**Parameters** 111 112| Name| Type | Mandatory| Description | 113| ------ | ------- | ---- | -------------------------------------- | 114| autoPlay | boolean | Yes | Whether to enable automatic playback for child components.<br>Default value: **false** (automatic playback is disabled for child components).| 115| options | [AutoPlayOptions](#autoplayoptions18) | Yes | Whether child components stop automatic playback when the screen is pressed by fingers, a mouse device, or other input devices. If **stopWhenTouched** is set to **true**, automatic playback resumes after any finger lifts in multi-touch scenarios.<br>Default value: **{ stopWhenTouched: true }**.| 116 117### interval 118 119interval(value: number) 120 121Sets the interval for automatic playback. 122 123**Widget capability**: This API can be used in ArkTS widgets since API version 10. 124 125**Atomic service API**: This API can be used in atomic services since API version 11. 126 127**System capability**: SystemCapability.ArkUI.ArkUI.Full 128 129**Parameters** 130 131| Name| Type | Mandatory| Description | 132| ------ | ------ | ---- | ---------------------------------------------------------- | 133| value | number | Yes | Interval for automatic playback. If the value is smaller than the value of [duration](#duration), the next carousel starts immediately after page switching completes.<br>Default value: **3000**.<br>Unit: ms<br>Value range: [0, +∞). If a value less than 0 is set, the default value is used.| 134 135### indicator 136 137indicator(value: DotIndicator | DigitIndicator | boolean) 138 139Sets the style of the navigation indicator. 140 141**Widget capability**: This API can be used in ArkTS widgets since API version 10. 142 143**Atomic service API**: This API can be used in atomic services since API version 11. 144 145**System capability**: SystemCapability.ArkUI.ArkUI.Full 146 147**Parameters** 148 149| Name| Type | Mandatory| Description | 150| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 151| value | [DotIndicator](#dotindicator10)<sup>10+</sup> \| [DigitIndicator](#digitindicator10)<sup>10+</sup> \| boolean | Yes | Style of the navigation indicator.<br> \- **DotIndicator**: dot style.<br> \- **DigitIndicator**: digit style.<br> \- **boolean**: whether to enable the navigation indicator. The value **true** means to enable the feature, and **false** means the opposite.<br> Default value: **true**<br> Default style: **DotIndicator**| 152 153### indicator<sup>15+</sup> 154 155indicator(indicator: IndicatorComponentController | DotIndicator | DigitIndicator | boolean) 156 157Sets the navigation indicator for the component. 158 159**Widget capability**: This API can be used in ArkTS widgets since API version 15. 160 161**Atomic service API**: This API can be used in atomic services since API version 15. 162 163**System capability**: SystemCapability.ArkUI.ArkUI.Full 164 165**Parameters** 166 167| Name| Type | Mandatory| Description | 168| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 169| indicator | [IndicatorComponentController](ts-swiper-components-indicator.md#indicatorcomponentcontroller)<sup>15+</sup> \| [DotIndicator](#dotindicator10) \| [DigitIndicator](#digitindicator10) \| boolean| Yes | Style of the navigation indicator.<br>\- **IndicatorComponentController**: separate navigation indicator controller. This controller can be bound to an external navigation indicator, but the external and internal indicators cannot coexist.<br> \- **DotIndicator**: dot style.<br> \- **DigitIndicator**: digit style.<br> \- **boolean**: whether to enable the navigation indicator. The value **true** means to enable the feature, and **false** means the opposite.<br> Default value: **true**<br> Default style: **DotIndicator**| 170 171 172### loop 173 174loop(value: boolean) 175 176Sets whether to enable loop playback. The value **true** means to enable loop playback. When LazyForEach is used, it is recommended that the number of the components to load exceed 5. 177 178**Widget capability**: This API can be used in ArkTS widgets since API version 10. 179 180**Atomic service API**: This API can be used in atomic services since API version 11. 181 182**System capability**: SystemCapability.ArkUI.ArkUI.Full 183 184**Parameters** 185 186| Name| Type | Mandatory| Description | 187| ------ | ------- | ---- | ------------------------------- | 188| value | boolean | Yes | Whether to enable loop playback. The value **true** means to enable loop playback, and **false** means the opposite.<br>Default value: **true**.| 189 190### duration 191 192duration(value: number) 193 194Sets the duration of the animation for child component switching. 195 196**duration** must be used in conjunction with [curve](#curve8). 197 198The default curve for the animation is [interpolatingSpring](../js-apis-curve.md#curvesinterpolatingspring10). When this curve is applied, the duration of the animation is determined solely by the parameters of the curve itself and is no longer governed by the **duration** setting. For curves that are not governed by the **duration** setting, see [Interpolation Calculation](../js-apis-curve.md). Among others, [springMotion](../js-apis-curve.md#curvesspringmotion9) and [responsiveSpringMotion](../js-apis-curve.md#curvesresponsivespringmotion9) do not respect the **duration** setting. To have the animation duration managed by **duration**, you should select a different curve for the **curve** attribute. 199 200**Atomic service API**: This API can be used in atomic services since API version 11. 201 202**System capability**: SystemCapability.ArkUI.ArkUI.Full 203 204**Parameters** 205 206| Name| Type | Mandatory| Description | 207| ------ | ------ | ---- | ----------------------------------------------------- | 208| value | number | Yes | Duration of the autoplay for child component switching.<br>Default value: **400**<br>Unit: ms<br>Value range: [0, +∞). If a value less than 0 is set, the default value is used.| 209 210### vertical 211 212vertical(value: boolean) 213 214Sets whether vertical swiping is used. 215 216**Widget capability**: This API can be used in ArkTS widgets since API version 10. 217 218**Atomic service API**: This API can be used in atomic services since API version 11. 219 220**System capability**: SystemCapability.ArkUI.ArkUI.Full 221 222**Parameters** 223 224| Name| Type | Mandatory| Description | 225| ------ | ------- | ---- | ---------------------------------- | 226| value | boolean | Yes | Whether vertical swiping is used. The value **true** means vertical swiping, and **false** means horizontal swiping.<br>Default value: **false**.| 227 228### itemSpace 229 230itemSpace(value: number | string) 231 232Sets the space between child components. Percentage values are not supported. 233 234If the type is number, the default unit is vp. If the type is string, the pixel unit must be explicitly specified, for example, **'10px'**; if the unit is not specified, for example, **'10'**, the default unit vp is used. 235 236**Widget capability**: This API can be used in ArkTS widgets since API version 10. 237 238**Atomic service API**: This API can be used in atomic services since API version 11. 239 240**System capability**: SystemCapability.ArkUI.ArkUI.Full 241 242**Parameters** 243 244| Name| Type | Mandatory| Description | 245| ------ | -------------------------- | ---- | -------------------------------------- | 246| value | number \| string | Yes | Space between child components.<br>Default value: **0**<br>Value range: [0, +∞). Values less than 0 or exceeding the **Swiper** component width are treated as the default value.| 247 248### displayMode 249 250displayMode(value: SwiperDisplayMode) 251 252Sets the mode in which elements are displayed along the main axis. This API takes effect only when **displayCount** is not set. 253 254**Widget capability**: This API can be used in ArkTS widgets since API version 10. 255 256**Atomic service API**: This API can be used in atomic services since API version 11. 257 258**System capability**: SystemCapability.ArkUI.ArkUI.Full 259 260**Parameters** 261 262| Name| Type | Mandatory| Description | 263| ------ | ----------------------------------------------- | ---- | ------------------------------------------------------------ | 264| value | [SwiperDisplayMode](#swiperdisplaymode) | Yes | Mode in which elements are displayed along the main axis.<br>Default value: **SwiperDisplayMode.STRETCH**| 265 266### cachedCount<sup>8+</sup> 267 268cachedCount(value: number) 269 270Sets the number of child components to be preloaded (cached), which are needed for the specific number of pages immediately before and after the current page. If a preceding item is deleted, the succeeding items will shift forward. For example, if **cachedCount** is set to **1**, the child components on the previous page and the next page are cached. If **swipeByGroup** in **displayCount** is set to **true**, child components are cached by group. For example, if **cachedCount** is set to **1** and **swipeByGroup** is set to **true**, the child components in the previous and next groups are cached. 271 272> **NOTE** 273> 274> - In continuous scrolling scenarios where one **Swiper** child component is displayed per screen, setting **cachedCount** to **1** or **2** is typically sufficient. For best practices, see [Optimizing Frame Loss During Swiper Component Loading – Caching Data Items](https://developer.huawei.com/consumer/en/doc/best-practices/bpta-swiper_high_performance_development_guide#section143504547145). 275 276**Widget capability**: This API can be used in ArkTS widgets since API version 10. 277 278**Atomic service API**: This API can be used in atomic services since API version 11. 279 280**System capability**: SystemCapability.ArkUI.ArkUI.Full 281 282**Parameters** 283 284| Name| Type | Mandatory| Description | 285| ------ | ------ | ---- | -------------------------------- | 286| value | number | Yes | Number of child components to be preloaded (cached).<br>Default value: **1**<br>Value range: [0, +∞). If a value less than 0 is set, the default value is used.| 287 288### cachedCount<sup>15+</sup> 289 290cachedCount(count: number, isShown: boolean) 291 292Sets the number of child components to be cached. 293 294**Widget capability**: This API can be used in ArkTS widgets since API version 15. 295 296**Atomic service API**: This API can be used in atomic services since API version 15. 297 298**System capability**: SystemCapability.ArkUI.ArkUI.Full 299 300**Parameters** 301 302| Name| Type | Mandatory| Description | 303| ------ | ------ | ---- | -------------------------------- | 304| count | number | Yes | Number of child components to be preloaded (cached).<br>Default value: **1**<br>Value range: [0, +∞). If a value less than 0 is set, the default value is used.| 305| isShown | boolean | Yes | Whether the cached nodes within the range rendered without being added to the render tree.<br>Default value: **false**, indicating that cached nodes within the range are rendered.| 306 307### disableSwipe<sup>8+</sup> 308 309disableSwipe(value: boolean) 310 311Sets whether to disable the swipe feature. 312 313**Widget capability**: This API can be used in ArkTS widgets since API version 10. 314 315**Atomic service API**: This API can be used in atomic services since API version 11. 316 317**System capability**: SystemCapability.ArkUI.ArkUI.Full 318 319**Parameters** 320 321| Name| Type | Mandatory| Description | 322| ------ | ------- | ---- | ---------------------------------------- | 323| value | boolean | Yes | Whether to disable the swipe feature. The value **true** means to disable the feature, and **false** means the opposite.<br>Default value: **false**.| 324 325### curve<sup>8+</sup> 326 327curve(value: Curve | string | ICurve) 328 329Sets the animation curve. The interpolating spring curve is used by default. For details about common curves, see [Curve](ts-appendix-enums.md#curve). You can also create custom curves (interpolation curve objects) by using the API provided by the [interpolation calculation](../js-apis-curve.md) module. 330 331**Widget capability**: This API can be used in ArkTS widgets since API version 10. 332 333**Atomic service API**: This API can be used in atomic services since API version 11. 334 335**System capability**: SystemCapability.ArkUI.ArkUI.Full 336 337**Parameters** 338 339| Name| Type | Mandatory| Description | 340| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------- | 341| value | [Curve](ts-appendix-enums.md#curve) \| string \| [ICurve](../js-apis-curve.md#icurve9)<sup>10+</sup> | Yes | Animation curve.<br>The **string** type is deprecated since API version 9 (see [curves.init](../js-apis-curve.md#curvesinitdeprecated), [curves.steps](../js-apis-curve.md#curvesstepsdeprecated), [curves.cubicBezier](../js-apis-curve.md#curvescubicbezierdeprecated), and [curves.spring](../js-apis-curve.md#curvesspringdeprecated)). Use **Curve** or **ICurve** instead.<br>Default value: **[interpolatingSpring](../js-apis-curve.md#curvesinterpolatingspring10)(-1, 1, 328, 34)**.| 342 343### indicatorStyle<sup>(deprecated)</sup> 344 345indicatorStyle(value?: IndicatorStyle) 346 347Sets the style of the navigation indicator. 348 349This API is supported since API version 8 and is deprecated since API version 10. You are advised to use [indicator](#indicator10) instead. 350 351**System capability**: SystemCapability.ArkUI.ArkUI.Full 352 353**Parameters** 354 355| Name| Type | Mandatory| Description | 356| ------ | --------------------------------------------------- | ---- | ------------ | 357| value | [IndicatorStyle](#indicatorstyledeprecated) | No | Style of the navigation indicator.| 358 359### displayCount<sup>8+</sup> 360 361displayCount(value: number | string | [SwiperAutoFill](#swiperautofill10), swipeByGroup?: boolean) 362 363Sets the number of elements to display per page. 364 365**number** type: Child elements' main-axis width adapts to the **Swiper** component's main-axis width. The child elements are stretched or shrunk to equally divide the **Swiper** component's width (minus **displayCount-1** times **itemSpace**). Values less than or equal to 0 are treated as the default value **1**.<br> 366**string** type: Only **'auto'** is supported. Child elements are laid out linearly based on their main-axis width without adapting to the **Swiper** component's width. [customContentTransition](#customcontenttransition12) and [onContentDidScroll](#oncontentdidscroll12) events are disabled.<br> 367**SwiperAutoFill** type: Child elements' main-axis width adapts to the **Swiper** component's main-axis width. The system automatically works out the number of elements per page based on the width and **minSize** settings of the **Swiper** component. If **minSize** is left empty or set to a value less than or equal to 0, the **Swiper** component displays one column. 368 369> **NOTE** 370> 371>1. When turning pages by group is used, the drag distance threshold for turning pages is half of the width of the **Swiper** component (50% of the child elements width if turning pages by child element is used). If the number of child elements in the last group is less than the value of **displayCount**, placeholders are used, but they show the **Swiper** background style directly and do not display any content. 372> 373>2. When **displayCount** is set to **'auto'** and looping is disabled, the position of the selected navigation indicator aligns with the first page in the viewport. If the first page is only partially displayed in the viewport after switching, the selected navigation indicator remains aligned with the page's position, between two unselected indicators. In this case, you are advised to hide the navigation indicators. 374> 375>3. If the navigation indicator is in dot style, the number of displayed navigation dots equals the number of child elements when the number of child elements displayed in the viewport is 1 (single-page scenario) or **displayCount** is set to **'auto'**. 376 377When the navigation dot is set to dot style and the number of child elements displayed in the viewport is greater than 1 (multi-page scenario), the number of displayed navigation dots follows the rules below. 378 379| Total Children Count > Visible Children Count| Swiping by Group Enabled| Loop Status | Number of Navigation Dots Displayed | Description | 380| ------------------------------------------ | ------------ | --------------- | ------------------------------------------------------------ | ---------------------------------------- | 381| Yes | Yes | **loop** set to **true** | Equals the number of groups (calculated by dividing the total number of child elements by the number of visible child elements, with rounding up if there is a remainder).| Not effective when **displayCount** is set to **'auto'**.| 382| Yes | Yes | **loop** set to **false**| Equals the number of groups (calculated by dividing the total number of child elements by the number of visible child elements, with rounding up if there is a remainder).| Not effective when **displayCount** is set to **'auto'**.| 383| Yes | No | **loop** set to **true** | Equals the actual number of page turns available (that is, the total number of child elements).| —— | 384| Yes | No | **loop** set to **false**| Equals the actual number of page turns available (calculated as total number of child elements minus the number of visible child elements, plus 1).| Not effective when **displayCount** is set to **'auto'**.| 385| No (while the total number of child elements is greater than 0) | —— | —— | 1 | Not effective when **displayCount** is set to **'auto'**.| 386| No (while the total number of child elements is 0)| —— | —— | 0| —— | 387 388**Widget capability**: This API can be used in ArkTS widgets since API version 10. 389 390**Atomic service API**: This API can be used in atomic services since API version 11. 391 392**System capability**: SystemCapability.ArkUI.ArkUI.Full 393 394**Parameters** 395 396| Name | Type | Mandatory| Description | 397| -------------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 398| value | number \| string \| [SwiperAutoFill](#swiperautofill10)<sup>10+</sup> | Yes | Number of elements to display per page.<br> Default value: **1**<br>Value range: (0, +∞). If this parameter is set to a value less than or equal to 0, the default value is used.| 399| swipeByGroup<sup>11+</sup> | boolean | No | Whether to turn pages by group. The value **true** means to turn pages by group, and **false** means to turn pages by child element. When turning pages by group is used, the number of child elements per group is the value of **displayCount**.<br> Default value: **false**.| 400 401> **NOTE** 402> 403> When the number of child components is less than or equal to the total number of allowed nodes in the content area (totalDisplayCount = displayCount + prevMargin? (1 : 0 ) + nextMargin? (1 : 0 )), the **Swiper** component generally uses the non-looping mode for layout. In this case, the child components specified by **nextMargin** and **prevMargin** take up space in the viewport, but are not displayed. The specifications of the **Swiper** component are calculated based on the value of **totalDisplayCount**. The exceptions are as follows: 404> 405> - When the number of child components is equal to the total number of allowed nodes in the content area and both **prevMargin** and **nextMargin** take effect, set **loop** to **true** to enable loop playback. 406> 407> - When the number of child components is equal to the value of **displayCount** plus 1 and at least one of **prevMargin** and **nextMargin** takes effect, set **loop** to **true** to enable loop playback. When loop playback is enabled, a snapshot is generated as the placeholder image. (The snapshot may not be correctly generated for those components that take a long time to display, such as those that use asynchronous image loading. Avoid enabling loop playback under this scenario.) 408> 409 410### effectMode<sup>8+</sup> 411 412effectMode(value: EdgeEffect) 413 414Sets the effect used when the component is at one of the edges, which is effective only when [loop](#loop) is set to **false**. This effect does not apply when **SwiperController.changeIndex()**, **SwiperController.showNext()**, or **SwiperController.showPrevious()** is used to navigate to the first or last page. 415 416**Widget capability**: This API can be used in ArkTS widgets since API version 10. 417 418**Atomic service API**: This API can be used in atomic services since API version 11. 419 420**System capability**: SystemCapability.ArkUI.ArkUI.Full 421 422**Parameters** 423 424| Name| Type | Mandatory| Description | 425| ------ | --------------------------------------------- | ---- | -------------------------------------------- | 426| value | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Yes | Effect used when the component is at one of the edges.<br>Default value: **EdgeEffect.Spring**| 427 428### displayArrow<sup>10+</sup> 429 430displayArrow(value: ArrowStyle | boolean, isHoverShow?: boolean) 431 432Sets the arrow style of the navigation indicator. 433 434**Atomic service API**: This API can be used in atomic services since API version 11. 435 436**System capability**: SystemCapability.ArkUI.ArkUI.Full 437 438**Parameters** 439 440| Name | Type | Mandatory| Description | 441| -------------------------- | ------------------------------------------------ | ---- | ------------------------------------------------------------ | 442| value | [ArrowStyle](#arrowstyle10) \| boolean | Yes | Arrow and background to set. In cases of exceptions, the default values in the **ArrowStyle** object are used. The value **true** means to show the arrow and background in the default styles, and **false** means to hide the arrow and background.<br>Default value: **false**.| 443| isHoverShow | boolean | No | Whether to show the arrow on mouse hover.<br>Default value: **false**.<br>**NOTE**<br>1. **false**: The arrow is always displayed.<br>2. **true**: The arrow is displayed only mouse over.<br>With navigation dots, the arrow is displayed when mouse pointer hovers over the dots or arrows area.<br>Without navigation dots, the arrow is displayed when mouse pointer hovers over the **Swiper** display area.<br>3. When the arrow is displayed, clicking the arrow turns pages.| 444 445> **NOTE** 446> 447> When all child nodes fit within the viewport, resulting in only one screen's worth of content being visible, the **Swiper** component displays only that screen without any left or right page-turning arrows. 448 449### nextMargin<sup>10+</sup> 450 451nextMargin(value: Length, ignoreBlank?:boolean) 452 453Sets the trailing margin to reveal a portion of the next item. For the implementation example, see [Example 1: Setting the Navigation Indicator Interaction and Page Turning Effect](#example-1-setting-the-navigation-indicator-interaction-and-page-turning-effect). This attribute is effective only when the layout mode of the child components in **Swiper** is set to stretch, which mainly includes two scenarios: 1. **displayMode** is set to **SwiperDisplayMode.STRETCH**; 2. **displayCount** is assigned a numeric value. 454 455When the main axis runs horizontally and either **nextMargin** or **prevMargin** is greater than the measured width of the child component, both margins are hidden. 456 457When the main axis runs vertically and either **nextMargin** or **prevMargin** is greater than the measured height of the child component, both margins are hidden. 458 459**Atomic service API**: This API can be used in atomic services since API version 11. 460 461**System capability**: SystemCapability.ArkUI.ArkUI.Full 462 463**Parameters** 464 465| Name| Type | Mandatory| Description | 466| ------ | ---------------------------- | ---- | ---------------------- | 467| value | [Length](ts-types.md#length) | Yes | Trailing margin. Percentage values are not supported.<br>Default value: **0**.| 468| ignoreBlank<sup>12+</sup> | boolean | No | Whether to hide the trailing margin for the last page in non-loop scenarios.<br> **true**: Hide the trailing margin, in which case, the right edge of the last page is aligned with that of the **Swiper** component's viewable area.<br>**false**: Show the trailing margin, in which case, the last page has a **nextMargin**-specified gap from the **Swiper** component's right edge.<br>Default value: **false**.<br>**NOTE**<br>On the last page, the values of **prevMargin** and **nextMargin** are added to create a left margin that allows the previous page to be displayed partially.| 469 470### prevMargin<sup>10+</sup> 471 472prevMargin(value: Length, ignoreBlank?:boolean) 473 474Sets the leading margin to reveal a portion of the previous item. For the implementation example, see [Example 1: Setting the Navigation Indicator Interaction and Page Turning Effect](#example-1-setting-the-navigation-indicator-interaction-and-page-turning-effect). This attribute is effective only when the layout mode of the child components in **Swiper** is set to stretch, which mainly includes two scenarios: 1. **displayMode** is set to **SwiperDisplayMode.STRETCH**; 2. **displayCount** is assigned a numeric value. 475 476When the main axis runs horizontally and either **nextMargin** or **prevMargin** is greater than the measured width of the child component, both margins are hidden. 477 478When the main axis runs vertically and either **nextMargin** or **prevMargin** is greater than the measured height of the child component, both margins are hidden. 479 480**Atomic service API**: This API can be used in atomic services since API version 11. 481 482**System capability**: SystemCapability.ArkUI.ArkUI.Full 483 484**Parameters** 485 486| Name| Type | Mandatory| Description | 487| ------ | ---------------------------- | ---- | ---------------------- | 488| value | [Length](ts-types.md#length) | Yes | Leading margin. Percentage values are not supported.<br>Default value: **0**.| 489| ignoreBlank<sup>12+</sup> | boolean | No | Whether to hide the leading margin for the first page in non-loop scenarios.<br> **true**: Hide the leading margin, in which case, the left edge of the first page is aligned with that of the **Swiper** component's viewable area.<br>**false**: Show the leading margin, in which case, the first page has a **prevMargin**-specified gap from the **Swiper** component's left edge.<br>Default value: **false**.<br>**NOTE**<br>On the first page, the values of **prevMargin** and **nextMargin** are added to create a right margin that allows the next page to be displayed partially.| 490 491### nestedScroll<sup>11+</sup> 492 493nestedScroll(value: SwiperNestedScrollMode) 494 495Sets the nested scrolling mode of the **Swiper** component and its parent container. When **loop** is set to **true**, the **Swiper** component has no edge effect and does not trigger nested scrolling of its parent container. 496 497**Atomic service API**: This API can be used in atomic services since API version 11. 498 499**System capability**: SystemCapability.ArkUI.ArkUI.Full 500 501**Parameters** 502 503| Name| Type | Mandatory| Description | 504| ------ | ----------------------------------------------------------- | ---- | ------------------------------------------------------------ | 505| value | [SwiperNestedScrollMode](#swipernestedscrollmode11) | Yes | Nested scrolling mode of the **Swiper** component and its parent container.<br>Default value: **SwiperNestedScrollMode.SELF_ONLY**| 506 507> **NOTE** 508> 509> The **Swiper** component's flick animation logic differs from other scrollable components, as **Swiper** can only slide one page at a time and performs a page-flip animation during a flick. When a **Swiper** component is nested with other scrollable components, it will not accept the scroll offset values transmitted by its child nodes after its page-turning animation has already started. At this point, the page-turning animation of the **Swiper** and the edge effect animation of the child node will be executed simultaneously. 510 511### indicatorInteractive<sup>12+</sup> 512 513indicatorInteractive(value: boolean) 514 515Sets whether the navigation indicator is interactive. The value **true** means that the navigation indicator is interactive. 516 517**Atomic service API**: This API can be used in atomic services since API version 12. 518 519**System capability**: SystemCapability.ArkUI.ArkUI.Full 520 521**Parameters** 522 523| Name| Type | Mandatory| Description | 524| ------ | ----------------------------------------------------------- | ---- | ------------------------------------------------------------ | 525| value | boolean | Yes | Whether the navigation indicator is interactive. The value **true** means that the navigation indicator is interactive, and **false** means the opposite.<br>Default value: **true**.| 526 527### pageFlipMode<sup>15+</sup> 528 529pageFlipMode(mode: Optional\<PageFlipMode>) 530 531Sets the mode for flipping pages using the mouse wheel. 532 533**Widget capability**: This API can be used in ArkTS widgets since API version 15. 534 535**Atomic service API**: This API can be used in atomic services since API version 15. 536 537**System capability**: SystemCapability.ArkUI.ArkUI.Full 538 539**Parameters** 540 541| Name| Type | Mandatory| Description | 542| ------ | ----------------------------------------------------------- | ---- | ------------------------------------------------------------ | 543| mode | Optional\<[PageFlipMode](ts-appendix-enums.md#pageflipmode15)> | Yes | Mode for flipping pages using the mouse wheel.<br>Default value: **PageFlipMode.CONTINUOUS**| 544 545### maintainVisibleContentPosition<sup>20+</sup> 546 547maintainVisibleContentPosition(enabled: boolean) 548 549Sets whether to maintain the visible content position when data is inserted or deleted above or ahead of the viewport. This applies to **Swiper** components using a single [LazyForEach](../../../ui/state-management/arkts-rendering-control-lazyforeach.md) as the child node, where the data source is modified using **LazyForEach** API such as [onDateAdd](ts-rendering-control-lazyforeach.md#ondataadd8) or [onDataDelete](ts-rendering-control-lazyforeach.md#ondatadelete8). 550 551When **swipeByGroup** in [displayCount](#displaycount8) is set to **true**, the visible content position remains unchanged only if the inserted or deleted data quantity is a multiple of the group size. Otherwise, the visible content position may change during group recalculation. 552 553**Widget capability**: This API can be used in ArkTS widgets since API version 20. 554 555**Atomic service API**: This API can be used in atomic services since API version 20. 556 557**System capability**: SystemCapability.ArkUI.ArkUI.Full 558 559**Parameters** 560 561| Name| Type | Mandatory| Description | 562| ------ | ----------------------------------------------------------- | ---- | ------------------------------------------------------------ | 563| enabled | boolean | Yes | Whether to maintain the visible content position when data is inserted or deleted above or ahead of the viewport.<br>Default value: **false**.<br>**false**: The visible content position will change when data is inserted or deleted. **true**: The visible content position remains unchanged when data is inserted or deleted. Animations stop if the data source is modified during an animation due to target index changes.| 564 565## IndicatorStyle<sup>(deprecated)</sup> 566 567This API is supported since API version 8 and is deprecated since API version 10. You are advised to use [indicator](#indicator10) instead. 568 569**System capability**: SystemCapability.ArkUI.ArkUI.Full 570 571| Name | Type | Mandatory| Description | 572| ------------- | ------------------------------------------ | ---- | ---------------------------------------------------- | 573| left | [Length](ts-types.md#length) | No | Position of the navigation indicator relative to the left edge of the **Swiper** component.<br>If neither **left** nor **right** is set, the navigation indicator is centered along the main axis based on its own size and the size of the **Swiper** component.<br>If the value specified is **0**, the navigation indicator is placed at the position 0.<br>Priority: higher than the **right** property<br>Value range: [0, Swiper width - Navigation indicator area width]. Values outside this range are adjusted to the nearest boundary. | 574| top | [Length](ts-types.md#length) | No | Position of the navigation indicator relative to the top edge of the **Swiper** component.<br>If neither **top** nor **bottom** is set, the navigation indicator is aligned at the bottom along the cross axis based on its own size and the size of the **Swiper** component, which is the same effect as setting **bottom=0**.<br>If the value specified is **0**, the navigation indicator is placed at the position 0.<br>Priority: higher than the **bottom** property<br>Value range: [0, Swiper height - Navigation indicator area height]. Values outside this range are adjusted to the nearest boundary. | 575| right | [Length](ts-types.md#length) | No | Position of the navigation indicator relative to the right edge of the **Swiper** component.<br>If neither **left** nor **right** is set, the navigation indicator is centered along the main axis based on its own size and the size of the **Swiper** component.<br>If the value specified is **0**, the navigation indicator is placed at the position 0.<br>Priority: lower than the **left** property.<br>Value range: [0, Swiper width - Navigation indicator area width]. Values outside this range are adjusted to the nearest boundary. | 576| bottom | [Length](ts-types.md#length) | No | Position of the navigation indicator relative to the bottom edge of the **Swiper** component.<br>If neither **top** nor **bottom** is set, the navigation indicator is aligned at the bottom along the cross axis based on its own size and the size of the **Swiper** component, which is the same effect as setting **bottom=0**.<br>If the value specified is **0**, the navigation indicator is placed at the position 0.<br>Priority: lower than the **top** property<br>Value range: [0, Swiper height - Navigation indicator area height]. Values outside this range are adjusted to the nearest boundary. | 577| size | [Length](ts-types.md#length) | No | Diameter of the navigation indicator. Percentage values are not supported.<br>Default value: **6vp**| 578| mask | boolean | No | Whether to enable the mask for the navigation indicator.<br>The value **true** means to enable the mask for the navigation indicator, and **false** means the opposite. | 579| color | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the navigation indicator. | 580| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the selected navigation indicator. | 581 582## SwiperDisplayMode 583 584Enumerates the modes in which elements are displayed along the main axis. 585 586**System capability**: SystemCapability.ArkUI.ArkUI.Full 587 588| Name | Description | 589| ---------------------------------- | ------------------------------------------------------------ | 590| Stretch<sup>(deprecated)</sup> | The width of each page in the **Swiper** component equals the component's own width.<br>This API is deprecated since API version 10. You are advised to use **STRETCH** instead.<br>**Widget capability**: This API can be used in ArkTS widgets since API version 7.| 591| AutoLinear<sup>(deprecated)</sup> | The width of each page in the **Swiper** component equals the maximum width of child components. This enumerated value behaves the same as setting [displayCount](#displaycount8) to **'auto'** (string type). For details, see [displayCount](#displaycount8).<br>This API is deprecated since API version 10. You are advised to use [Scroller.scrollTo](ts-container-scroll.md#scrollto) instead.<br>**Widget capability**: This API can be used in ArkTS widgets since API version 7.| 592| STRETCH<sup>10+</sup> | The width of each page in the **Swiper** component equals the component's own width.<br>**Widget capability**: This API can be used in ArkTS widgets since API version 10.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 593| AUTO_LINEAR<sup>(deprecated)</sup> | The width of each page in the **Swiper** component equals the width of the leftmost child component in the viewport. This enumerated value behaves the same as setting [displayCount](#displaycount8) to **'auto'** (string type). For details, see [displayCount](#displaycount8).<br>This API is supported since API version 10 and is deprecated since API version 12. You are advised to use [Scroller.scrollTo](ts-container-scroll.md#scrollto) instead.<br>**Widget capability**: This API can be used in ArkTS widgets since API version 10.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 594 595## SwiperNestedScrollMode<sup>11+</sup> 596 597Enumerates the nested scrolling modes of the **Swiper** component and its parent container. 598 599**Atomic service API**: This API can be used in atomic services since API version 11. 600 601**System capability**: SystemCapability.ArkUI.ArkUI.Full 602 603| Name | Value| Description | 604| ------------ | -- | ---------------------------------------- | 605| SELF_ONLY | 0 | The scrolling is contained within the **Swiper** component, and no scroll chaining occurs, that is, the parent container does not scroll when the component scrolling reaches the boundary.| 606| SELF_FIRST | 1 | The **Swiper** component scrolls first, and when it hits the boundary, the parent container scrolls. When the parent container hits the boundary, its edge effect is displayed. If no edge effect is specified for the parent container, the edge effect of the **Swiper** component is displayed instead.| 607 608## SwiperController 609 610Implements the controller for the **Swiper** component. Bind this object to a **Swiper** component to control page turning and other functionalities. 611 612**Widget capability**: This API can be used in ArkTS widgets since API version 10. 613 614**Atomic service API**: This API can be used in atomic services since API version 11. 615 616**System capability**: SystemCapability.ArkUI.ArkUI.Full 617 618### constructor 619 620constructor() 621 622A constructor used to create a **SwiperController** object. 623 624**Widget capability**: This API can be used in ArkTS widgets since API version 10. 625 626**Atomic service API**: This API can be used in atomic services since API version 11. 627 628**System capability**: SystemCapability.ArkUI.ArkUI.Full 629 630### showNext 631 632showNext() 633 634Turns to the next page. The page turning includes a transition animation, with the duration set by the [duration](#duration) attribute of the **Swiper** component. 635 636**Widget capability**: This API can be used in ArkTS widgets since API version 10. 637 638**Atomic service API**: This API can be used in atomic services since API version 11. 639 640**System capability**: SystemCapability.ArkUI.ArkUI.Full 641 642### showPrevious 643 644showPrevious() 645 646Turns to the previous page. The page turning includes a transition animation, with the duration set by the [duration](#duration) attribute of the **Swiper** component. 647 648**Widget capability**: This API can be used in ArkTS widgets since API version 10. 649 650**Atomic service API**: This API can be used in atomic services since API version 11. 651 652**System capability**: SystemCapability.ArkUI.ArkUI.Full 653 654### changeIndex<sup>12+</sup> 655 656changeIndex(index: number, useAnimation?: boolean) 657 658Goes to a specified page. 659 660**Widget capability**: This API can be used in ArkTS widgets since API version 12. 661 662**Atomic service API**: This API can be used in atomic services since API version 12. 663 664**System capability**: SystemCapability.ArkUI.ArkUI.Full 665 666**Parameters** 667 668| Name | Type | Mandatory | Description | 669| -------- | ---------- | ---- | -------- | 670| index| number | Yes | Index of the target page in the **Swiper** component.<br>**NOTE**<br>If the value specified is less than 0 or greater than the maximum page index, the value **0** is used.| 671| useAnimation| boolean | No | Whether to use an animation for when the target page is reached. The value **true** means to use an animation, and **false** means the opposite.<br>Default value: **false**| 672 673### changeIndex<sup>15+</sup> 674 675changeIndex(index: number, animationMode?: SwiperAnimationMode | boolean) 676 677Moves to a specific page. 678>**NOTE** 679> 680>This API itself supports jumping without animation (set **animationMode** to **false** or **SwiperAnimationMode.NO_ANIMATION**). Avoid starting an animation with **changeIndex** and then interrupt it with **finishAnimation** to achieve animation-free jumping. 681 682**Widget capability**: This API can be used in ArkTS widgets since API version 15. 683 684**Atomic service API**: This API can be used in atomic services since API version 15. 685 686**System capability**: SystemCapability.ArkUI.ArkUI.Full 687 688**Parameters** 689 690| Name | Type | Mandatory | Description | 691| -------- | ---------- | ---- | -------- | 692| index| number | Yes | Index of the target page in the **Swiper** component.<br>**NOTE**<br>If the value specified is less than 0 or greater than the maximum page index, the value **0** is used.| 693| animationMode| [SwiperAnimationMode](#swiperanimationmode15) \| boolean | No | Animation mode for moving to the specified page.<br>Default value: **SwiperAnimationMode.NO_ANIMATION**<br> **NOTE**<br>The value **true** is equivalent to **SwiperAnimationMode.DEFAULT_ANIMATION**, which means to use the default animation. The value **false** is equivalent to **SwiperAnimationMode.NO_ANIMATION**, which means to use no animation.| 694 695### finishAnimation 696 697finishAnimation(callback?: VoidCallback) 698 699Stops an animation. 700 701**Widget capability**: This API can be used in ArkTS widgets since API version 10. 702 703**Atomic service API**: This API can be used in atomic services since API version 11. 704 705**System capability**: SystemCapability.ArkUI.ArkUI.Full 706 707**Parameters** 708 709| Name | Type | Mandatory | Description | 710| -------- | ---------- | ---- | -------- | 711| callback | [VoidCallback](./ts-types.md#voidcallback12) | No | Callback invoked when the animation stops.| 712 713### preloadItems<sup>18+</sup> 714 715preloadItems(indices: Optional\<Array\<number>>): Promise\<void> 716 717Preloads child nodes. After this API is called, all specified child nodes will be loaded at once. Therefore, for performance considerations, it is recommended that you load child nodes in batches. 718 719If the **SwiperController** object is not bound to any **Swiper** component, any attempt to call APIs on it will result in a JavaScript exception, together with the error code 100004. Therefore, you are advised to use **try-catch** to handle potential exceptions when calling APIs on **SwiperController**. 720 721When combining **SwiperController** with [LazyForEach](../../../ui/state-management/arkts-rendering-control-lazyforeach.md) and custom components, be aware that **LazyForEach** only retains custom components within the cache range. Components outside this range are removed. Therefore, make sure the nodes to preload are within the cache range of **LazyForEach** to avoid issues. 722 723**Widget capability**: This API can be used in ArkTS widgets since API version 18. 724 725**Atomic service API**: This API can be used in atomic services since API version 18. 726 727**System capability**: SystemCapability.ArkUI.ArkUI.Full 728 729**Parameters** 730 731| Name | Type | Mandatory | Description | 732| ----- | ------ | ---- | ---------------------------------------- | 733| indices | Optional\<Array\<number>> | Yes| Array of indexes of the child nodes to preload.<br>The default value is an empty array.| 734 735**Return value** 736 737| Type | Description | 738| ------------------------------------------------------------ | ------------------------ | 739| Promise\<void> | Promise used to return the value.| 740 741**Error codes** 742 743For details about the error codes, see [Universal Error Codes](../../errorcode-universal.md) and [Scrollable Component Error Codes](../../apis-arkui/errorcode-scroll.md). 744 745| ID | Error Message | 746| -------- | -------------------------------------------- | 747| 401 | Parameter invalid. Possible causes: 1. The parameter type is not Array\<number>; 2. The parameter is an empty array; 3. The parameter contains an invalid index. | 748| 100004 | Controller not bound to component. | 749 750## SwiperAnimationMode<sup>15+</sup> 751 752Enumerates the animation mode for moving to a specific page in the **Swiper** component. 753 754**Widget capability**: This API can be used in ArkTS widgets since API version 15. 755 756**Atomic service API**: This API can be used in atomic services since API version 15. 757 758**System capability**: SystemCapability.ArkUI.ArkUI.Full 759 760| Name | Value | Description | 761| ------------- | ---- | ------------------------------------------------------------ | 762| NO_ANIMATION | 0 | Move to the specified page without any animation. | 763| DEFAULT_ANIMATION | 1 | Move to the specified page with the default animation. | 764| FAST_ANIMATION | 2 | Move to a page near the specified page without animation, and then navigate to the specified page with the default animation.| 765 766## Indicator<sup>10+</sup> 767 768Sets the distance between the navigation indicator and the **Swiper** component. Note that due to its default interaction area height of 32 vp, the navigation indicator cannot be placed flush against the bottom edge. 769 770**Widget capability**: This API can be used in ArkTS widgets since API version 10. 771 772**Atomic service API**: This API can be used in atomic services since API version 11. 773 774**System capability**: SystemCapability.ArkUI.ArkUI.Full 775 776### left 777 778left(value: Length): T 779 780Sets the position of the navigation indicator relative to the left edge of the **Swiper** component. 781 782**Widget capability**: This API can be used in ArkTS widgets since API version 10. 783 784**Atomic service API**: This API can be used in atomic services since API version 11. 785 786**System capability**: SystemCapability.ArkUI.ArkUI.Full 787 788**Parameters** 789 790| Name| Type | Mandatory| Description | 791| ------ | ---------------------------- | ---- | ------------------------------------------------------------ | 792| value | [Length](ts-types.md#length) | Yes | Position of the navigation indicator relative to the left edge of the **Swiper** component.<br>If neither **left** nor **right** is set, the navigation indicator is centered along the main axis based on its own size and the size of the **Swiper** component.<br>If the value specified is **0**, the navigation indicator is placed at the position 0.<br>Priority: higher than the **right** property<br>Value range: [0, Swiper width - Navigation indicator area width]. Values outside this range are adjusted to the nearest boundary.| 793 794**Return value** 795 796| Type| Description | 797| --- | ------------------ | 798| T | Current navigation indicator.| 799 800### top 801 802top(value: Length): T 803 804Sets the position of the navigation indicator relative to the top edge of the **Swiper** component. 805 806**Widget capability**: This API can be used in ArkTS widgets since API version 10. 807 808**Atomic service API**: This API can be used in atomic services since API version 11. 809 810**System capability**: SystemCapability.ArkUI.ArkUI.Full 811 812**Parameters** 813 814| Name| Type | Mandatory| Description | 815| ------ | ---------------------------- | ---- | ------------------------------------------------------------ | 816| value | [Length](ts-types.md#length) | Yes | Position of the navigation indicator relative to the top edge of the **Swiper** component.<br>If neither **top** nor **bottom** is set, the navigation indicator is aligned at the bottom along the cross axis based on its own size and the size of the **Swiper** component, which is the same effect as setting **bottom=0**.<br>If the value specified is **0**, the navigation indicator is placed at the position 0.<br>Priority: higher than the **bottom** property<br>Value range: [0, Swiper height - Navigation indicator area height]. Values outside this range are adjusted to the nearest boundary.| 817 818**Return value** 819 820| Type| Description | 821| --- | ------------------ | 822| T | Current navigation indicator.| 823 824### right 825 826right(value: Length): T 827 828Sets the position of the navigation indicator relative to the right edge of the **Swiper** component. 829 830**Widget capability**: This API can be used in ArkTS widgets since API version 10. 831 832**Atomic service API**: This API can be used in atomic services since API version 11. 833 834**System capability**: SystemCapability.ArkUI.ArkUI.Full 835 836**Parameters** 837 838| Name| Type | Mandatory| Description | 839| ------ | ---------------------------- | ---- | ------------------------------------------------------------ | 840| value | [Length](ts-types.md#length) | Yes | Sets the position of the navigation indicator relative to the right edge of the **Swiper** component.<br>If neither **left** nor **right** is set, the navigation indicator is centered along the main axis based on its own size and the size of the **Swiper** component.<br>If the value specified is **0**, the navigation indicator is placed at the position 0.<br>Priority: lower than the **left** property.<br>Value range: [0, Swiper width - Navigation indicator area width]. Values outside this range are adjusted to the nearest boundary.| 841 842**Return value** 843 844| Type| Description | 845| --- | ------------------ | 846| T | Current navigation indicator.| 847 848### bottom 849 850bottom(value: Length): T 851 852Sets the position of the navigation indicator relative to the bottom edge of the **Swiper** component. 853 854**Widget capability**: This API can be used in ArkTS widgets since API version 10. 855 856**Atomic service API**: This API can be used in atomic services since API version 11. 857 858**System capability**: SystemCapability.ArkUI.ArkUI.Full 859 860**Parameters** 861 862| Name| Type | Mandatory| Description | 863| ------ | ---------------------------- | ---- | ------------------------------------------------------------ | 864| value | [Length](ts-types.md#length) | Yes | Position of the navigation indicator relative to the bottom edge of the **Swiper** component.<br>If neither **top** nor **bottom** is set, the navigation indicator is aligned at the bottom along the cross axis based on its own size and the size of the **Swiper** component, which is the same effect as setting **bottom=0**.<br>If the value specified is **0**, the navigation indicator is placed at the position 0.<br>Priority: lower than the **top** property<br>Value range: [0, Swiper height - Navigation indicator area height]. Values outside this range are adjusted to the nearest boundary.| 865 866**Return value** 867 868| Type| Description | 869| --- | ------------------ | 870| T | Current navigation indicator.| 871 872### bottom<sup>19+</sup> 873 874bottom(bottom: LengthMetrics | Length, ignoreSize: boolean): T 875 876Sets the position of the navigation indicator relative to the bottom edge of the **Swiper** component. You can also choose to ignore the size of the navigation indicator using the **ignoreSize** property. 877 878**Widget capability**: This API can be used in ArkTS widgets since API version 19. 879 880**Atomic service API**: This API can be used in atomic services since API version 19. 881 882**System capability**: SystemCapability.ArkUI.ArkUI.Full 883 884**Parameters** 885 886 887| Name| Type | Mandatory| Description | 888| ------ | ---------------------------- | ---- | ------------------------------------------------------------ | 889| bottom | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) \| [Length](ts-types.md#length)| Yes | Position of the navigation indicator relative to the bottom edge of the **Swiper** component.<br>If neither **top** nor **bottom** is set, the navigation indicator is aligned at the bottom along the cross axis based on its own size and the size of the **Swiper** component, which is the same effect as setting **bottom=0**.<br>If the value specified is **0**, the navigation indicator is placed at the position 0.<br>Priority: lower than the **top** property<br>Value range: [0, Swiper height - Navigation indicator area height]. Values outside this range are adjusted to the nearest boundary.| 890| ignoreSize | boolean | Yes | Whether to ignore the size of the navigation indicator.<br>Default value: **false**.<br>Setting **true** positions the indicator closer to the **Swiper** component's bottom. For the usage, see [Example 9: Using the space and bottom APIs on the Navigation Indicator](#example-9-using-the-space-and-bottom-apis-on-the-navigation-indicator).<br> **NOTE**<br>The **ignoreSize** property does not apply to the digit-style navigation indicator in the following scenarios:<br> • [vertical](#vertical) is set to **false** and the value of **bottom** is greater than 0.<br> • When [vertical](#vertical) is set to **true**:<br>1. The value of **bottom** is greater than 0.<br> 2. The value of **bottom** is **undefined**.<br> 3. **isSidebarMiddle** is set to **false**.| 891 892**Return value** 893 894| Type| Description | 895| --- | ------------------ | 896| T | Current navigation indicator.| 897 898### start<sup>12+</sup> 899 900start(value: LengthMetrics): T 901 902Sets the distance between the navigation indicator and the right edge (in right-to-left scripts) or the left edge (in left-to-right scripts) of the **Swiper** component. 903 904**Widget capability**: This API can be used in ArkTS widgets since API version 12. 905 906**Atomic service API**: This API can be used in atomic services since API version 12. 907 908**System capability**: SystemCapability.ArkUI.ArkUI.Full 909 910**Parameters** 911 912| Name| Type | Mandatory| Description | 913| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 914| value | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | Yes | Distance between the navigation indicator and the right edge (in right-to-left scripts) or the left edge (in left-to-right scripts) of the **Swiper** component.<br>Default value: **0**<br>Unit: vp| 915 916**Return value** 917 918| Type| Description | 919| --- | ------------------ | 920| T | Current navigation indicator.| 921 922### end<sup>12+</sup> 923 924end(value: LengthMetrics): T 925 926Sets the distance between the navigation indicator and the left edge (in right-to-left scripts) or the right edge (in left-to-right scripts) of the **Swiper** component. 927 928**Widget capability**: This API can be used in ArkTS widgets since API version 12. 929 930**Atomic service API**: This API can be used in atomic services since API version 12. 931 932**System capability**: SystemCapability.ArkUI.ArkUI.Full 933 934**Parameters** 935 936| Name| Type | Mandatory | Description | 937| ------ | ---------------------------- | ---- | ---------------------------------------- | 938| value | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | Yes | Distance between the navigation indicator and the left edge (in right-to-left scripts) or the right edge (in left-to-right scripts) of the **Swiper** component.<br>Default value: **0**<br>Unit: vp | 939 940**Return value** 941 942| Type| Description | 943| --- | ------------------ | 944| T | Current navigation indicator.| 945 946### dot 947 948static dot(): DotIndicator 949 950Returns a **DotIndicator** object. 951 952**Widget capability**: This API can be used in ArkTS widgets since API version 10. 953 954**Atomic service API**: This API can be used in atomic services since API version 11. 955 956**System capability**: SystemCapability.ArkUI.ArkUI.Full 957 958**Return value** 959 960| Type | Description | 961| ------------------------------- | ------------ | 962| [DotIndicator](#dotindicator10) | Dot-style navigation indicator.| 963 964### digit 965 966static digit(): DigitIndicator 967 968Returns **DigitIndicator** object. 969 970**Widget capability**: This API can be used in ArkTS widgets since API version 10. 971 972**Atomic service API**: This API can be used in atomic services since API version 11. 973 974**System capability**: SystemCapability.ArkUI.ArkUI.Full 975 976**Return value** 977 978| Type | Description | 979| ----------------------------------- | ------------ | 980| [DigitIndicator](#digitindicator10) | Digit-style navigation indicator.| 981 982## DotIndicator<sup>10+</sup> 983 984A constructor used to create a **DotIndicator** object. It inherits from [Indicator](#indicator10). 985 986**Atomic service API**: This API can be used in atomic services since API version 11. 987 988**System capability**: SystemCapability.ArkUI.ArkUI.Full 989 990### itemWidth 991 992itemWidth(value: Length): DotIndicator 993 994Sets the width of the dot-style navigation indicator. This parameter cannot be set in percentage. 995 996**Widget capability**: This API can be used in ArkTS widgets since API version 10. 997 998**Atomic service API**: This API can be used in atomic services since API version 11. 999 1000**System capability**: SystemCapability.ArkUI.ArkUI.Full 1001 1002**Parameters** 1003 1004| Name| Type | Mandatory| Description | 1005| ------ | ---------------------------- | ---- | ------------------------------------------------------------ | 1006| value | [Length](ts-types.md#length) | Yes | Width of the dot-style navigation indicator. This parameter cannot be set in percentage.<br>Default value: **6**<br>Unit: vp| 1007 1008**Return value** 1009 1010| Type | Description | 1011| ------------------------------- | ------------ | 1012| [DotIndicator](#dotindicator10) | Current dot-style navigation indicator.| 1013 1014### itemHeight 1015 1016itemHeight(value: Length): DotIndicator 1017 1018Sets the height of the dot-style navigation indicator. This parameter cannot be set in percentage. 1019 1020**Widget capability**: This API can be used in ArkTS widgets since API version 10. 1021 1022**Atomic service API**: This API can be used in atomic services since API version 11. 1023 1024**System capability**: SystemCapability.ArkUI.ArkUI.Full 1025 1026**Parameters** 1027 1028| Name| Type | Mandatory| Description | 1029| ------ | ---------------------------- | ---- | ------------------------------------------------------------ | 1030| value | [Length](ts-types.md#length) | Yes | Height of the dot-style navigation indicator. This parameter cannot be set in percentage.<br>Default value: **6**<br>Unit: vp| 1031 1032**Return value** 1033 1034| Type | Description | 1035| ------------------------------- | ------------ | 1036| [DotIndicator](#dotindicator10) | Current dot-style navigation indicator.| 1037 1038### selectedItemWidth 1039 1040selectedItemWidth(value: Length): DotIndicator 1041 1042Sets the width of the selected dot in the dot-style navigation indicator. This parameter cannot be set in percentage. 1043 1044**Widget capability**: This API can be used in ArkTS widgets since API version 10. 1045 1046**Atomic service API**: This API can be used in atomic services since API version 11. 1047 1048**System capability**: SystemCapability.ArkUI.ArkUI.Full 1049 1050**Parameters** 1051 1052| Name| Type | Mandatory| Description | 1053| ------ | ---------------------------- | ---- | ------------------------------------------------------------ | 1054| value | [Length](ts-types.md#length) | Yes | Width of the selected dot in the dot-style navigation indicator. This parameter cannot be set in percentage.<br>Default value: **6**<br>Unit: vp| 1055 1056**Return value** 1057 1058| Type | Description | 1059| ------------------------------- | ------------ | 1060| [DotIndicator](#dotindicator10) | Current dot-style navigation indicator.| 1061 1062### selectedItemHeight 1063 1064selectedItemHeight(value: Length): DotIndicator 1065 1066Sets the height of the selected dot in the dot-style navigation indicator. This parameter cannot be set in percentage. 1067 1068**Widget capability**: This API can be used in ArkTS widgets since API version 10. 1069 1070**Atomic service API**: This API can be used in atomic services since API version 11. 1071 1072**System capability**: SystemCapability.ArkUI.ArkUI.Full 1073 1074**Parameters** 1075 1076| Name| Type | Mandatory| Description | 1077| ------ | ---------------------------- | ---- | ------------------------------------------------------------ | 1078| value | [Length](ts-types.md#length) | Yes | Height of the selected dot in the dot-style navigation indicator. This parameter cannot be set in percentage.<br>Default value: **6**<br>Unit: vp| 1079 1080**Return value** 1081 1082| Type | Description | 1083| ------------------------------- | ------------ | 1084| [DotIndicator](#dotindicator10) | Current dot-style navigation indicator.| 1085 1086### mask 1087 1088mask(value: boolean): DotIndicator 1089 1090Sets whether to enable the mask for the dot-style navigation indicator. 1091 1092**Widget capability**: This API can be used in ArkTS widgets since API version 10. 1093 1094**Atomic service API**: This API can be used in atomic services since API version 11. 1095 1096**System capability**: SystemCapability.ArkUI.ArkUI.Full 1097 1098**Parameters** 1099 1100| Name| Type | Mandatory| Description | 1101| ------ | ------- | ---- | ------------------------------------------------------------ | 1102| value | boolean | Yes | Whether to enable the mask for the dot-style navigation indicator. The value **true** means to enable the mask for the dot-style navigation indicator, and **false** means the opposite.<br>Default value: **false**.| 1103 1104**Return value** 1105 1106| Type | Description | 1107| ------------------------------- | ------------ | 1108| [DotIndicator](#dotindicator10) | Current dot-style navigation indicator.| 1109 1110### color 1111 1112color(value: ResourceColor): DotIndicator 1113 1114Sets the color of the dot-style navigation indicator. 1115 1116**Widget capability**: This API can be used in ArkTS widgets since API version 10. 1117 1118**Atomic service API**: This API can be used in atomic services since API version 11. 1119 1120**System capability**: SystemCapability.ArkUI.ArkUI.Full 1121 1122**Parameters** 1123 1124| Name| Type | Mandatory| Description | 1125| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 1126| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Color of the dot-style navigation indicator.<br>Default value: **'\#182431'** (10% opacity)| 1127 1128**Return value** 1129 1130| Type | Description | 1131| ------------------------------- | ------------ | 1132| [DotIndicator](#dotindicator10) | Current dot-style navigation indicator.| 1133 1134### selectedColor 1135 1136selectedColor(value: ResourceColor): DotIndicator 1137 1138Sets the color of the selected dot in the dot-style navigation indicator. 1139 1140**Widget capability**: This API can be used in ArkTS widgets since API version 10. 1141 1142**Atomic service API**: This API can be used in atomic services since API version 11. 1143 1144**System capability**: SystemCapability.ArkUI.ArkUI.Full 1145 1146**Parameters** 1147 1148| Name| Type | Mandatory| Description | 1149| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 1150| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Color of the selected dot in the dot-style navigation indicator.<br>Default value: **'\#007DFF'**| 1151 1152**Return value** 1153 1154| Type | Description | 1155| ------------------------------- | ------------ | 1156| [DotIndicator](#dotindicator10) | Current dot-style navigation indicator.| 1157 1158### maxDisplayCount<sup>12+</sup> 1159 1160maxDisplayCount(maxDisplayCount: number): DotIndicator 1161 1162Sets the maximum number of navigation dots in the dot-style navigation indicator. 1163 1164**Atomic service API**: This API can be used in atomic services since API version 12. 1165 1166**System capability**: SystemCapability.ArkUI.ArkUI.Full 1167 1168**Parameters** 1169 1170| Name | Type | Mandatory| Description | 1171| --------------- | ------ | ---- | ------------------------------------------------------------ | 1172| maxDisplayCount | number | Yes | Maximum number of navigation dots in the dot-style navigation indicator. If the actual number of navigation dots exceeds this limit, the overflow effect is activated, as shown in Example 5.<br>This parameter has no default value. If an invalid value is set, no overflow effect is applied.<br>Value range: [6, 9].<br>**NOTE**<br>In scenarios involving overflow display:<br>1. Interactive features, such as gestures and mouse operations, are not supported.<br>2. The position of the selected navigation dot corresponding to the middle page is not strictly fixed; it depends on the sequence of previous page-turning operations.<br>3. Currently, only scenarios with **displayCount** set to **1** are supported.| 1173 1174**Return value** 1175 1176| Type | Description | 1177| ------------------------------- | ------------ | 1178| [DotIndicator](#dotindicator10) | Current dot-style navigation indicator.| 1179 1180### space<sup>19+</sup> 1181 1182space(space: LengthMetrics): DotIndicator 1183 1184Sets the spacing between the dots in a dot-style navigation indicator for the **Swiper** component. Note that percentage values are not supported. 1185 1186**Widget capability**: This API can be used in ArkTS widgets since API version 19. 1187 1188**Atomic service API**: This API can be used in atomic services since API version 19. 1189 1190**System capability**: SystemCapability.ArkUI.ArkUI.Full 1191 1192**Parameters** 1193 1194| Name| Type | Mandatory| Description | 1195| ------ | ---------------------------- | ---- | ------------------------------------------------------------ | 1196| space | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | Yes | Spacing between the dots in the dot-style navigation indicator. Percentage values are not supported.<br>Default value: **8**<br>Unit: vp| 1197 1198**Return value** 1199 1200| Type | Description | 1201| ------------------------------- | ------------ | 1202| [DotIndicator](#dotindicator10) | Current dot-style navigation indicator.| 1203 1204### constructor 1205 1206constructor() 1207 1208A constructor used to create a **DotIndicator** object. 1209 1210**Widget capability**: This API can be used in ArkTS widgets since API version 10. 1211 1212**Atomic service API**: This API can be used in atomic services since API version 11. 1213 1214**System capability**: SystemCapability.ArkUI.ArkUI.Full 1215 1216>**NOTE** 1217> 1218>When pressed, the navigation indicator is zoomed in to 1.33 times. To account for this, there is a certain distance between the navigation indicator's visible boundary and its actual boundary in the non-pressed state. The distance increases with the value of **itemWidth**, **itemHeight**, **selectedItemWidth**, and **selectedItemHeight**. 1219 1220## DigitIndicator<sup>10+</sup> 1221 1222A constructor used to create a **DigitIndicator** object. It inherits from [Indicator](#indicator10). 1223 1224**Widget capability**: This API can be used in ArkTS widgets since API version 10. 1225 1226**Atomic service API**: This API can be used in atomic services since API version 11. 1227 1228**System capability**: SystemCapability.ArkUI.ArkUI.Full 1229 1230>**NOTE** 1231> 1232>When pages are turned by group, the child nodes displayed in the digit-style navigation indicator do not count placeholder nodes.<br> 1233>The maximum value of [maxFontScale](ts-basic-components-text.md#maxfontscale12) for the digit-style navigation indicator is 2. 1234 1235### fontColor 1236 1237fontColor(value: ResourceColor): DigitIndicator 1238 1239Sets the font color of the digit-style navigation indicator. 1240 1241**Widget capability**: This API can be used in ArkTS widgets since API version 10. 1242 1243**Atomic service API**: This API can be used in atomic services since API version 11. 1244 1245**System capability**: SystemCapability.ArkUI.ArkUI.Full 1246 1247**Parameters** 1248 1249| Name| Type | Mandatory| Description | 1250| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 1251| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Font color of the digit-style navigation indicator.<br>Default value: **'\#ff182431'**| 1252 1253**Return value** 1254 1255| Type | Description | 1256| ----------------------------------- | ------------ | 1257| [DigitIndicator](#digitindicator10) | Current digit-style navigation indicator.| 1258 1259### selectedFontColor 1260 1261selectedFontColor(value: ResourceColor): DigitIndicator 1262 1263Sets the font color of the selected digit in the digit-style navigation indicator. 1264 1265**Widget capability**: This API can be used in ArkTS widgets since API version 10. 1266 1267**Atomic service API**: This API can be used in atomic services since API version 11. 1268 1269**System capability**: SystemCapability.ArkUI.ArkUI.Full 1270 1271**Parameters** 1272 1273| Name| Type | Mandatory| Description | 1274| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 1275| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Font color of the selected digit in the digit-style navigation indicator.<br>Default value: **'\#ff182431'**| 1276 1277**Return value** 1278 1279| Type | Description | 1280| ----------------------------------- | ------------ | 1281| [DigitIndicator](#digitindicator10) | Current digit-style navigation indicator.| 1282 1283### digitFont 1284 1285digitFont(value: Font): DigitIndicator 1286 1287Sets the font style of the digit-style navigation indicator. 1288 1289**Widget capability**: This API can be used in ArkTS widgets since API version 10. 1290 1291**Atomic service API**: This API can be used in atomic services since API version 11. 1292 1293**System capability**: SystemCapability.ArkUI.ArkUI.Full 1294 1295**Parameters** 1296 1297| Name| Type | Mandatory| Description | 1298| ------ | ------------------------ | ---- | ------------------------------------------------------------ | 1299| value | [Font](ts-types.md#font) | Yes | Font style of the digit-style navigation indicator.<br>Only the **size** and **weight** parameters in **Font** are adjustable. Setting **family** and **style** has no effect.<br>Default value:<br>{ size: 14, weight: FontWeight.Normal } | 1300 1301**Return value** 1302 1303| Type | Description | 1304| ----------------------------------- | ------------ | 1305| [DigitIndicator](#digitindicator10) | Current digit-style navigation indicator.| 1306 1307### selectedDigitFont 1308 1309selectedDigitFont(value: Font): DigitIndicator 1310 1311Sets the font style of the selected digit in the digit-style navigation indicator. 1312 1313**Widget capability**: This API can be used in ArkTS widgets since API version 10. 1314 1315**Atomic service API**: This API can be used in atomic services since API version 11. 1316 1317**System capability**: SystemCapability.ArkUI.ArkUI.Full 1318 1319**Parameters** 1320 1321| Name| Type | Mandatory| Description | 1322| ------ | ------------------------ | ---- | ------------------------------------------------------------ | 1323| value | [Font](ts-types.md#font) | Yes | Font style of the selected digit in the digit-style navigation indicator.<br>Default value:<br>{ size: 14, weight: FontWeight.Normal } | 1324 1325>**NOTE** 1326> 1327> When pages are turned by group, the child nodes displayed in the digit-style navigation indicator do not count placeholder nodes. 1328 1329**Return value** 1330 1331| Type | Description | 1332| ----------------------------------- | ------------ | 1333| [DigitIndicator](#digitindicator10) | Current digit-style navigation indicator.| 1334 1335### constructor 1336 1337constructor() 1338 1339A constructor used to create a **DigitIndicator** object. 1340 1341**Widget capability**: This API can be used in ArkTS widgets since API version 10. 1342 1343**Atomic service API**: This API can be used in atomic services since API version 11. 1344 1345**System capability**: SystemCapability.ArkUI.ArkUI.Full 1346 1347## ArrowStyle<sup>10+</sup> 1348Describes the left and right arrow attributes. 1349 1350**Atomic service API**: This API can be used in atomic services since API version 11. 1351 1352**System capability**: SystemCapability.ArkUI.ArkUI.Full 1353 1354| Name | Type | Mandatory | Description | 1355| ---------------- | ---------------------------------------- | ---- | ---------------------------------------- | 1356| showBackground | boolean | No | Whether to show the background for the arrow. The value **true** means to show the background for the arrow, and **false** means the opposite.<br>Default value: **false**. | 1357| isSidebarMiddle | boolean | No | Whether the arrow is centered on both sides of the **Swiper** component. The value **true** means that the arrow is centered on both sides of the **Swiper** component, and **false** means that the arrow is show on either side of the navigation indicator.<br>Default value: **false**.<br> | 1358| backgroundSize | [Length](ts-types.md#length) | No | Size of the background.<br>On both sides of the navigation indicator:<br>Default value: **24vp**.<br>On both sides of the component:<br>Default value: **32vp**.<br>Percentage values are not supported.| 1359| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the background.<br>On both sides of the navigation indicator:<br>Default value: **'\#00000000'**.<br>On both sides of the component:<br>Default value: **'\#19182431'**.| 1360| arrowSize | [Length](ts-types.md#length) | No | Size of the arrow.<br>On both sides of the navigation indicator:<br>Default value: **18vp**.<br>On both sides of the component:<br>Default value: **24vp**.<br>**NOTE**<br>If **showBackground** is set to **true**, the value of **arrowSize** is 3/4 of the value of **backgroundSize**.<br>Percentage values are not supported.| 1361| arrowColor | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the arrow.<br>Default value: **'\#182431'** | 1362 1363## SwiperAutoFill<sup>10+</sup> 1364 1365Describes the auto-fill attribute. 1366 1367**Widget capability**: This API can be used in ArkTS widgets since API version 10. 1368 1369**Atomic service API**: This API can be used in atomic services since API version 11. 1370 1371**System capability**: SystemCapability.ArkUI.ArkUI.Full 1372 1373| Name | Type | Mandatory| Description | 1374| ------- | -------------------- | ------ | ------------------------------------ | 1375| minSize | [VP](ts-types.md#vp10) | Yes | Minimum width of the element.<br>Default value: **0**.| 1376 1377## AutoPlayOptions<sup>18+</sup> 1378 1379Defines the properties for controlling the automatic playback behavior. 1380 1381**Widget capability**: This API can be used in ArkTS widgets since API version 18. 1382 1383**Atomic service API**: This API can be used in atomic services since API version 18. 1384 1385**System capability**: SystemCapability.ArkUI.ArkUI.Full 1386 1387| Name | Type | Mandatory | Description | 1388| ---------------- | ---------------------------------------- | ---- | ---------------------------------------- | 1389| stopWhenTouched | boolean | Yes | Whether the automatic playback stops immediately when the component is touched.<br>The value **true** means that the automatic playback stops immediately when the component is touched, and **false** means the opposite.<br>Default value: **true**.| 1390 1391## Events 1392 1393In addition to the [universal events](ts-component-general-events.md), the following events are supported. 1394 1395### onChange 1396 1397onChange(event: Callback\<number>) 1398 1399Triggered when the index of the currently displayed child component changes. The return value is the index of the currently displayed child component. 1400 1401When the **Swiper** component is used together with **LazyForEach**, the subpage UI update cannot be triggered in the **onChange** event. 1402 1403**Widget capability**: This API can be used in ArkTS widgets since API version 10. 1404 1405**Atomic service API**: This API can be used in atomic services since API version 11. 1406 1407**System capability**: SystemCapability.ArkUI.ArkUI.Full 1408 1409**Parameters** 1410 1411| Name| Type | Mandatory| Description | 1412| ------ | ------ | ---- | -------------------- | 1413| event | [Callback](./ts-types.md#callback12)\<number> | Yes | Index of the currently displayed element.| 1414 1415### onAnimationStart<sup>9+</sup> 1416 1417onAnimationStart(event: OnSwiperAnimationStartCallback) 1418 1419Triggered when the page transition animation starts. 1420 1421> **NOTE** 1422> 1423> - When this callback is invoked, the page transition animation logic is executed in the rendering thread, allowing the idle main thread to load resources required by child components. This reduces preloading time for nodes within the **cachedCount** range. For best practices, see [Optimizing Frame Loss During Swiper Component Loading – Preloading Data](https://developer.huawei.com/consumer/en/doc/best-practices/bpta-swiper_high_performance_development_guide#section8783121513246). 1424 1425**Widget capability**: This API can be used in ArkTS widgets since API version 10. 1426 1427**Atomic service API**: This API can be used in atomic services since API version 11. 1428 1429**System capability**: SystemCapability.ArkUI.ArkUI.Full 1430 1431**Parameters** 1432 1433| Name| Type | Mandatory| Description | 1434| ------ | ------ | ---- | -------------------- | 1435| event | [OnSwiperAnimationStartCallback](#onswiperanimationstartcallback18) | Yes | Callback triggered when the page transition animation starts.| 1436 1437>**NOTE** 1438> 1439>- When the duration of the page transition animation is set to 0, this callback is triggered only in the following scenarios: swiping to turn pages, automatic playback, calling **SwiperController.showNext()** or **SwiperController.showPrevious()**, and touching navigation points to navigate. 1440 1441### onAnimationEnd<sup>9+</sup> 1442 1443onAnimationEnd(event: OnSwiperAnimationEndCallback) 1444 1445Triggered when the page transition animation ends. 1446 1447This event is triggered when the switching animation of the **Swiper** component ends, whether it is caused by gesture interruption or by calling **finishAnimation** through **SwiperController**. 1448 1449**Widget capability**: This API can be used in ArkTS widgets since API version 10. 1450 1451**Atomic service API**: This API can be used in atomic services since API version 11. 1452 1453**System capability**: SystemCapability.ArkUI.ArkUI.Full 1454 1455**Parameters** 1456 1457| Name| Type | Mandatory| Description | 1458| ------ | ------ | ---- | -------------------- | 1459| event | [OnSwiperAnimationEndCallback](#onswiperanimationendcallback18) | Yes | Callback triggered when the page transition animation ends.| 1460 1461>**NOTE** 1462> 1463>- When the duration of the page transition animation is set to 0, this callback is triggered only in the following scenarios: swiping to turn pages, automatic playback, calling **SwiperController.showNext()** or **SwiperController.showPrevious()**, and touching navigation points to navigate. 1464 1465### onGestureSwipe<sup>10+</sup> 1466 1467onGestureSwipe(event: OnSwiperGestureSwipeCallback) 1468 1469Triggered on a frame-by-frame basis when the page is turned by a swipe. 1470 1471**Atomic service API**: This API can be used in atomic services since API version 11. 1472 1473**System capability**: SystemCapability.ArkUI.ArkUI.Full 1474 1475**Parameters** 1476 1477| Name| Type | Mandatory| Description | 1478| ------ | ------ | ---- | -------------------- | 1479| event | [OnSwiperGestureSwipeCallback](#onswipergestureswipecallback18) | Yes | Callback triggered on a frame-by-frame basis when the page is turned by a swipe. **onGestureSwipe** is called after **onTouch**. For post-release operations, consider using [onAnimationStart](#onanimationstart9).| 1480 1481### customContentTransition<sup>12+</sup> 1482 1483customContentTransition(transition: SwiperContentAnimatedTransition) 1484 1485Defines a custom page transition animation. During finger-following swipes and post-release transition animations, this triggers a frame-by-frame callback for all pages in the viewport, allowing you to customize animations by modifying properties like opacity, scale, and translation. 1486 1487Instructions: 1488 14891. This API does not work when **prevMargin** and **nextMargin** are set in such a way that the **Swiper** frontend and backend display the same page during loop playback.<br>2. During finger-following swipes and post-release transition animations, the [SwiperContentTransitionProxy](#swipercontenttransitionproxy12) callback is invoked for all pages in the viewport on a frame-by-frame basis. For example, when there are two pages whose subscripts are 0 and 1 in the viewport, two callbacks whose indexes are 0 and 1 are invoked in each frame.<br>3. When the **swipeByGroup** parameter of the **displayCount** attribute is set to **true**, the callback is invoked for all pages in a group if any page in the group is within the viewport; and all pages in a group are removed from the render tree if none of them are within the viewport.<br>4. During finger-following swipes and post-release transition animations, the default animation (page scrolling) is still effective. If you do not want the page to scroll, you can set the **translate** property on the main axis to offset the page scrolling. For example, if the value of **displayCount** is **2** and there are two pages whose subscripts are 0 and 1 within the viewport, you can set the **translate** property on the main axis to the following on a frame-by-frame basis: **translate** for page 0 = **-position** x **mainAxisLength**; **translate** for page 1 = **-(position - 1)** x **mainAxisLength** 1490 1491**Atomic service API**: This API can be used in atomic services since API version 12. 1492 1493**System capability**: SystemCapability.ArkUI.ArkUI.Full 1494 1495**Parameters** 1496 1497| Name| Type| Mandatory| Description| 1498| ------ | ---- | ---- | ---- | 1499| transition | [SwiperContentAnimatedTransition](#swipercontentanimatedtransition12) | Yes| Information about the custom page transition animation.| 1500 1501### onContentDidScroll<sup>12+</sup> 1502 1503onContentDidScroll(handler: ContentDidScrollCallback) 1504 1505Triggered when content in the **Swiper** component scrolls. 1506 1507Instructions: 1508 15091. This API does not work when **prevMargin** and **nextMargin** are set in such a way that the **Swiper** frontend and backend display the same page during loop playback.<br>2. During page scrolling, the [ContentDidScrollCallback](#contentdidscrollcallback12) callback is invoked for all pages in the viewport on a frame-by-frame basis. For example, when there are two pages whose subscripts are 0 and 1 in the viewport, two callbacks whose indexes are 0 and 1 are invoked in each frame.<br>3. When the **swipeByGroup** parameter of the **displayCount** attribute is set to **true**, the callback is invoked for all pages in a group if any page in the group is within the viewport. 1510 1511**Atomic service API**: This API can be used in atomic services since API version 12. 1512 1513**System capability**: SystemCapability.ArkUI.ArkUI.Full 1514 1515**Parameters** 1516 1517| Name| Type| Mandatory| Description| 1518| ------ | ---- | ---- | ---- | 1519| handler | [ContentDidScrollCallback](#contentdidscrollcallback12) | Yes| Callback triggered when content in the **Swiper** component scrolls.| 1520 1521### onSelected<sup>18+</sup> 1522 1523onSelected(event: Callback\<number>) 1524 1525Triggered when the selected element changes. The index of the currently selected element is returned. 1526 1527**Widget capability**: This API can be used in ArkTS widgets since API version 18. 1528 1529**Atomic service API**: This API can be used in atomic services since API version 18. 1530 1531**System capability**: SystemCapability.ArkUI.ArkUI.Full 1532 1533**Parameters** 1534 1535| Name| Type | Mandatory| Description | 1536| ------ | ------ | ---- | -------------------- | 1537| event | [Callback](./ts-types.md#callback12)\<number> | Yes | Index of the currently selected element.| 1538 1539> **NOTE** 1540> 1541> In the **onSelected** callback, do not modify the **index** attribute of the **Swiper** component, or call the **SwiperController.changeIndex()**, **SwiperController.showNext()**, or **SwiperController.showPrevious()** APIs. 1542 1543### onUnselected<sup>18+</sup> 1544 1545onUnselected(event: Callback\<number>) 1546 1547Triggered when the selected element changes. The index of the element that is about to be hidden is returned. 1548 1549**Widget capability**: This API can be used in ArkTS widgets since API version 18. 1550 1551**Atomic service API**: This API can be used in atomic services since API version 18. 1552 1553**System capability**: SystemCapability.ArkUI.ArkUI.Full 1554 1555**Parameters** 1556 1557| Name| Type | Mandatory| Description | 1558| ------ | ------ | ---- | -------------------- | 1559| event | [Callback](./ts-types.md#callback12)\<number> | Yes | Index of the element that is about to be hidden.| 1560 1561> **NOTE** 1562> 1563> In the **onUnselected** callback, do not modify the **index** attribute of the **Swiper** component, nor call the **SwiperController.changeIndex()**, **SwiperController.showNext()**, or **SwiperController.showPrevious()** APIs. 1564 1565### onContentWillScroll<sup>15+</sup> 1566 1567onContentWillScroll(handler: ContentWillScrollCallback) 1568 1569Triggered when the **Swiper** component is about to scroll. This event allows you to intercept and control the scrolling behavior of the component. The component determines whether to allow the scroll action based on the return value. If **true** is returned, the scroll action is allowed, and the pages in the **Swiper** component will follow the scrolling. If **false** is returned, the scroll action is disallowed, and the pages will remain stationary. 1570 15711. This event is only triggered by gesture operations, including finger swipes, scrolling the mouse wheel, and moving focus using keyboard arrow keys. 1572 15732. During finger swipes, the event is triggered for each frame. The system uses the return value of the event to determine whether to respond to the swipe for each frame. 1574 15753. For scrolling the mouse wheel and moving focus using keyboard arrow keys, the event is triggered once per page turning. The system uses the return value to decide whether to allow the page turning. 1576 1577**Widget capability**: This API can be used in ArkTS widgets since API version 15. 1578 1579**Atomic service API**: This API can be used in atomic services since API version 15. 1580 1581**System capability**: SystemCapability.ArkUI.ArkUI.Full 1582 1583**Parameters** 1584 1585| Name| Type| Mandatory| Description| 1586| ------ | ---- | ---- | ---- | 1587| handler | [ContentWillScrollCallback](#contentwillscrollcallback15) | Yes| Callback triggered when content in the **Swiper** component scrolls.| 1588 1589## OnSwiperAnimationStartCallback<sup>18+</sup> 1590 1591type OnSwiperAnimationStartCallback = (index: number, targetIndex: number, extraInfo: SwiperAnimationEvent) => void 1592 1593Defines the callback triggered when the page transition animation starts. 1594 1595**Widget capability**: This API can be used in ArkTS widgets since API version 18. 1596 1597**Atomic service API**: This API can be used in atomic services since API version 18. 1598 1599**System capability**: SystemCapability.ArkUI.ArkUI.Full 1600 1601**Parameters** 1602 1603| Name | Type | Mandatory| Description | 1604| ------------------------- | ---------------------------------------------------------- | ---- | ------------------------------------------------------------ | 1605| index | number | Yes | Index of the currently displayed element. If there are multiple columns, **index** indicates the index of the leftmost component. | 1606| targetIndex<sup>10+</sup> | number | Yes | Index of the target element to switch to. | 1607| extraInfo<sup>10+</sup> | [SwiperAnimationEvent](#swiperanimationevent10) | Yes | Extra information of the animation, including the offset of the currently displayed element and target element relative to the start position of the **Swiper** along the main axis, and the hands-off velocity.| 1608 1609## OnSwiperAnimationEndCallback<sup>18+</sup> 1610 1611type OnSwiperAnimationEndCallback = (index: number, extraInfo: SwiperAnimationEvent) => void 1612 1613Defines the callback triggered when the page transition animation ends. 1614 1615**Widget capability**: This API can be used in ArkTS widgets since API version 18. 1616 1617**Atomic service API**: This API can be used in atomic services since API version 18. 1618 1619**System capability**: SystemCapability.ArkUI.ArkUI.Full 1620 1621**Parameters** 1622 1623| Name | Type | Mandatory| Description | 1624| ----------------------- | ---------------------------------------------------------- | ---- | ------------------------------------------------------------ | 1625| index | number | Yes | Index of the currently displayed element. If there are multiple columns, **index** indicates the index of the leftmost component. | 1626| extraInfo<sup>10+</sup> | [SwiperAnimationEvent](#swiperanimationevent10) | Yes | Extra information of the animation, which is the offset of the currently displayed element relative to the start position of the **Swiper** along the main axis.| 1627 1628## OnSwiperGestureSwipeCallback<sup>18+</sup> 1629 1630type OnSwiperGestureSwipeCallback = (index: number, extraInfo: SwiperAnimationEvent) => void 1631 1632Defines the callback triggered on a frame-by-frame basis when the page is turned by a swipe. 1633 1634**Atomic service API**: This API can be used in atomic services since API version 18. 1635 1636**System capability**: SystemCapability.ArkUI.ArkUI.Full 1637 1638**Parameters** 1639 1640| Name | Type | Mandatory| Description | 1641| --------- | ---------------------------------------------------------- | ---- | ------------------------------------------------------------ | 1642| index | number | Yes | Index of the currently displayed element. If there are multiple columns, **index** indicates the index of the leftmost component. | 1643| extraInfo | [SwiperAnimationEvent](#swiperanimationevent10) | Yes | Extra information of the animation, which is the offset of the currently displayed element relative to the start position of the **Swiper** along the main axis.| 1644 1645## ContentDidScrollCallback<sup>12+</sup> 1646 1647type ContentDidScrollCallback = (selectedIndex: number, index: number, position: number, mainAxisLength: number) => void 1648 1649Triggered during the swipe action of the **Swiper** component. For details about the parameters, see [SwiperContentTransitionProxy](#swipercontenttransitionproxy12). 1650 1651**Atomic service API**: This API can be used in atomic services since API version 12. 1652 1653**System capability**: SystemCapability.ArkUI.ArkUI.Full 1654 1655| Name| Type| Mandatory| Description| 1656| ------ | ---- | ---- | ---- | 1657| selectedIndex | number | Yes| Index of the currently selected page.| 1658| index | number | Yes| Index of a page in the viewport.| 1659| position | number | Yes| Position of the page specified by **index** relative to the start position of the **Swiper** main axis (start position of the page corresponding to **selectedIndex**).| 1660| mainAxisLength | number | Yes| Length of the page specified by **index** along the main axis, in vp.| 1661 1662## ContentWillScrollCallback<sup>15+</sup> 1663 1664type ContentWillScrollCallback = (result: SwiperContentWillScrollResult) => boolean 1665 1666Defines the callback triggered when the **Swiper** component is about to scroll. The return value indicates whether the scroll action is allowed. 1667 1668**Widget capability**: This API can be used in ArkTS widgets since API version 15. 1669 1670**Atomic service API**: This API can be used in atomic services since API version 15. 1671 1672**System capability**: SystemCapability.ArkUI.ArkUI.Full 1673 1674**Parameters** 1675 1676| Name| Type| Mandatory| Description| 1677| ------ | ---- | ---- | ---- | 1678| result | [SwiperContentWillScrollResult](#swipercontentwillscrollresult15) | Yes| Information related to the upcoming scroll action, including the index of the current page, the index of the page that will be displayed in the scroll direction, and the displacement of the scroll action.| 1679 1680**Return value** 1681 1682| Type| Description| 1683| ------ | ---- | 1684| boolean | Whether the scroll action is allowed. The value **true** means the scroll action is allowed, and **false** means the opposite.| 1685 1686## SwiperContentWillScrollResult<sup>15+</sup> 1687 1688Provides information related to the upcoming scroll action, including the index of the current page, the index of the page that will be displayed in the scroll direction, and the displacement of the scroll action. 1689 1690**Widget capability**: This API can be used in ArkTS widgets since API version 15. 1691 1692**Atomic service API**: This API can be used in atomic services since API version 15. 1693 1694**System capability**: SystemCapability.ArkUI.ArkUI.Full 1695 1696| Name| Type| Mandatory| Description| 1697| ------ | ---- | ---- | ---- | 1698| currentIndex | number | Yes| Index of the current page. During a finger swipe, this value remains constant as long as the finger is on the screen, even if the page has completely moved out of view.| 1699| comingIndex | number | Yes| Index of the page that will be displayed in the scroll direction.| 1700| offset | number | Yes| Displacement of the scroll action, which is signed to indicate different swipe directions. A positive value indicates a swipe from index=1 to index=0, while a negative value indicates a swipe from index=0 to index=1.<br>This value represents the offset for each frame during a finger swipe and the distance for page turning when the mouse wheel or keyboard navigation is used.| 1701 1702## SwiperAnimationEvent<sup>10+</sup> 1703 1704Describes the animation information of the **Swiper** component. 1705 1706**Atomic service API**: This API can be used in atomic services since API version 11. 1707 1708**System capability**: SystemCapability.ArkUI.ArkUI.Full 1709 1710| Name | Type | Read Only| Optional| Description | 1711| ------------- | ----------- | ---- | ---- |------------------------------- | 1712| currentOffset | number | No| No| Offset of the currently displayed element relative to the start position of the **Swiper** along the main axis. Unit: vp<br>Default value: **0**| 1713| targetOffset | number | No| No| Offset of the target element relative to the start position of the **Swiper** along the main axis. Unit: vp<br>Default value: **0**| 1714| velocity | number | No| No| Hands-off velocity at the beginning of the animation. Unit: VP/S<br>Default value: **0**| 1715 1716## SwiperContentAnimatedTransition<sup>12+</sup> 1717 1718Provides the information about the custom page transition animation. 1719 1720**Atomic service API**: This API can be used in atomic services since API version 12. 1721 1722**System capability**: SystemCapability.ArkUI.ArkUI.Full 1723 1724| Name| Type| Mandatory| Description| 1725| ------ | ---- | ---- | ---- | 1726| timeout | number | No| Timeout for the page transition animation. The timeout timer starts when the default animation (page scrolling) reaches the point where the first frame is moved out of the viewport. If you do not call the **finishTransition** API of [SwiperContentTransitionProxy](#swipercontenttransitionproxy12) before the timer expires, the component considers that the custom animation of the page ends and immediately removes the page node from the render tree. The unit is ms. The default value is **0**.| 1727| transition | Callback<[SwiperContentTransitionProxy](#swipercontenttransitionproxy12)> | Yes| Content of the custom page transition animation.| 1728 1729## SwiperContentTransitionProxy<sup>12+</sup> 1730 1731Implements the proxy object returned during the execution of the custom page transition animation of the **Swiper** component. You can use this object to obtain the page information in the custom animation viewport. You can also call the **finishTransition** API of this object to notify the **Swiper** component that the custom animation has finished playing. 1732 1733**Atomic service API**: This API can be used in atomic services since API version 12. 1734 1735**System capability**: SystemCapability.ArkUI.ArkUI.Full 1736 1737### Attributes 1738 1739| Name| Type| Read Only| Optional| Description| 1740| ---- | ---- | --- | ---- | --- | 1741| selectedIndex | number | No| No| Index of the currently selected page.| 1742| index | number | No| No| Index of a page in the viewport.| 1743| position | number | No| No| Position of the page specified by **index** relative to the start position of the **Swiper** main axis (start position of the page corresponding to **selectedIndex**).| 1744| mainAxisLength | number | No| No| Length of the page specified by **index** along the main axis, in vp.| 1745 1746>**NOTE** 1747> 1748>- For example, when the index of the currently selected child component is 0, during a transition animation from page 0 to page 1, the callback is triggered for all pages within the viewport on every frame. When pages 0 and 1 are both in the viewport, the callback is triggered twice per frame. The first callback has **selectedIndex** as **0**, **index** as **0**, **position** as the ratio of how much page 0 has moved relative to its position before the animation started on the current frame, and **mainAxisLength** as the length of page 0 on the main axis. The second callback has **selectedIndex** as **0**, **index** as **1**, **position** as the ratio of how much page 1 has moved relative to page 0 before the animation started on the current frame, and **mainAxisLength** as the length of page 1 on the main axis. 1749> 1750>- If the animation curve is a spring interpolation curve, during the transition animation from page 0 to page 1, due to the position and velocity when the user lifts their finger off the screen, animation may overshoot and slide past to page 2, then bounce back to page 1. Throughout this process, a callback is triggered for pages 1 and 2 within the viewport on every frame. 1751 1752 1753### finishTransition<sup>12+</sup> 1754 1755finishTransition(): void 1756 1757Notifies the **Swiper** component that the custom animation has finished playing. 1758 1759**Atomic service API**: This API can be used in atomic services since API version 12. 1760 1761**System capability**: SystemCapability.ArkUI.ArkUI.Full 1762 1763## Example 1764 1765### Example 1: Setting the Navigation Indicator Interaction and Page Turning Effect 1766 1767This example demonstrates how to use the **changeIndex** API with **SwiperAnimationMode** to move to a specific page in the **Swiper** component. 1768 1769```ts 1770// xxx.ets 1771class MyDataSource implements IDataSource { 1772 private list: number[] = []; 1773 1774 constructor(list: number[]) { 1775 this.list = list; 1776 } 1777 1778 totalCount(): number { 1779 return this.list.length; 1780 } 1781 1782 getData(index: number): number { 1783 return this.list[index]; 1784 } 1785 1786 registerDataChangeListener(listener: DataChangeListener): void { 1787 } 1788 1789 unregisterDataChangeListener() { 1790 } 1791} 1792 1793@Entry 1794@Component 1795struct SwiperExample { 1796 private swiperController: SwiperController = new SwiperController(); 1797 private data: MyDataSource = new MyDataSource([]); 1798 1799 aboutToAppear(): void { 1800 let list: number[] = []; 1801 for (let i = 1; i <= 10; i++) { 1802 list.push(i); 1803 } 1804 this.data = new MyDataSource(list); 1805 } 1806 1807 build() { 1808 Column({ space: 5 }) { 1809 Swiper(this.swiperController) { 1810 LazyForEach(this.data, (item: string) => { 1811 Text(item.toString()) 1812 .width('90%') 1813 .height(160) 1814 .backgroundColor(0xAFEEEE) 1815 .textAlign(TextAlign.Center) 1816 .fontSize(30) 1817 }, (item: string) => item) 1818 } 1819 .cachedCount(2) 1820 .index(1) 1821 .autoPlay(true) 1822 .interval(4000) 1823 .loop(true) 1824 .indicatorInteractive(true) 1825 .duration(1000) 1826 .itemSpace(5) 1827 .prevMargin(35) 1828 .nextMargin(35) 1829 .indicator( // Set the style of the navigation indicator. 1830 new DotIndicator() 1831 .itemWidth(15) 1832 .itemHeight(15) 1833 .selectedItemWidth(15) 1834 .selectedItemHeight(15) 1835 .color(Color.Gray) 1836 .selectedColor(Color.Blue)) 1837 .displayArrow({ // Set the arrow style of the navigation indicator. 1838 showBackground: true, 1839 isSidebarMiddle: true, 1840 backgroundSize: 24, 1841 backgroundColor: Color.White, 1842 arrowSize: 18, 1843 arrowColor: Color.Blue 1844 }, false) 1845 .curve(Curve.Linear) 1846 .onChange((index: number) => { 1847 console.info(index.toString()); 1848 }) 1849 .onGestureSwipe((index: number, extraInfo: SwiperAnimationEvent) => { 1850 console.info("index: " + index); 1851 console.info("current offset: " + extraInfo.currentOffset); 1852 }) 1853 .onAnimationStart((index: number, targetIndex: number, extraInfo: SwiperAnimationEvent) => { 1854 console.info("index: " + index); 1855 console.info("targetIndex: " + targetIndex); 1856 console.info("current offset: " + extraInfo.currentOffset); 1857 console.info("target offset: " + extraInfo.targetOffset); 1858 console.info("velocity: " + extraInfo.velocity); 1859 }) 1860 .onAnimationEnd((index: number, extraInfo: SwiperAnimationEvent) => { 1861 console.info("index: " + index); 1862 console.info("current offset: " + extraInfo.currentOffset); 1863 }) 1864 1865 Row({ space: 12 }) { 1866 Button('showPrevious') 1867 .onClick(() => { 1868 this.swiperController.showPrevious(); 1869 }) 1870 Button('showNext') 1871 .onClick(() => { 1872 this.swiperController.showNext(); 1873 }) 1874 }.margin(5) 1875 Row({ space: 5 }) { 1876 Button('FAST 0') 1877 .onClick(() => { 1878 this.swiperController.changeIndex(0, SwiperAnimationMode.FAST_ANIMATION); 1879 }) 1880 Button('FAST 3') 1881 .onClick(() => { 1882 this.swiperController.changeIndex(3, SwiperAnimationMode.FAST_ANIMATION); 1883 }) 1884 Button('FAST ' + 9) 1885 .onClick(() => { 1886 this.swiperController.changeIndex(9, SwiperAnimationMode.FAST_ANIMATION); 1887 }) 1888 }.margin(5) 1889 }.width('100%') 1890 .margin({ top: 5 }) 1891 } 1892} 1893``` 1894 1895 1896 1897### Example 2: Implementing a Digit Indicator 1898 1899This example showcases how to implement a digit indicator using the **DigitIndicator** API. 1900 1901```ts 1902// xxx.ets 1903class MyDataSource implements IDataSource { 1904 private list: number[] = []; 1905 1906 constructor(list: number[]) { 1907 this.list = list; 1908 } 1909 1910 totalCount(): number { 1911 return this.list.length; 1912 } 1913 1914 getData(index: number): number { 1915 return this.list[index]; 1916 } 1917 1918 registerDataChangeListener(listener: DataChangeListener): void { 1919 } 1920 1921 unregisterDataChangeListener() { 1922 } 1923} 1924 1925@Entry 1926@Component 1927struct SwiperExample { 1928 private swiperController: SwiperController = new SwiperController(); 1929 private data: MyDataSource = new MyDataSource([]); 1930 1931 aboutToAppear(): void { 1932 let list: number[] = []; 1933 for (let i = 1; i <= 10; i++) { 1934 list.push(i); 1935 } 1936 this.data = new MyDataSource(list); 1937 } 1938 1939 build() { 1940 Column({ space: 5 }) { 1941 Swiper(this.swiperController) { 1942 LazyForEach(this.data, (item: string) => { 1943 Text(item.toString()) 1944 .width('90%') 1945 .height(160) 1946 .backgroundColor(0xAFEEEE) 1947 .textAlign(TextAlign.Center) 1948 .fontSize(30) 1949 }, (item: string) => item) 1950 } 1951 .cachedCount(2) 1952 .index(1) 1953 .autoPlay(true) 1954 .interval(4000) 1955 .indicator(Indicator.digit() // Set the digit-style navigation indicator. 1956 .top(200) 1957 .fontColor(Color.Gray) 1958 .selectedFontColor(Color.Gray) 1959 .digitFont({ size: 20, weight: FontWeight.Bold }) 1960 .selectedDigitFont({ size: 20, weight: FontWeight.Normal })) 1961 .loop(true) 1962 .duration(1000) 1963 .itemSpace(0) 1964 .displayArrow(true, false) 1965 1966 Row({ space: 12 }) { 1967 Button('showNext') 1968 .onClick(() => { 1969 this.swiperController.showNext(); 1970 }) 1971 Button('showPrevious') 1972 .onClick(() => { 1973 this.swiperController.showPrevious(); 1974 }) 1975 }.margin(5) 1976 }.width('100%') 1977 .margin({ top: 5 }) 1978 } 1979} 1980``` 1981 1982 1983### Example 3: Configuring Group Page-Turning 1984 1985This example illustrates the group page-turning effect using the **displayCount** property. 1986 1987```ts 1988// xxx.ets 1989class MyDataSource implements IDataSource { 1990 private list: number[] = []; 1991 1992 constructor(list: number[]) { 1993 this.list = list; 1994 } 1995 1996 totalCount(): number { 1997 return this.list.length; 1998 } 1999 2000 getData(index: number): number { 2001 return this.list[index]; 2002 } 2003 2004 registerDataChangeListener(listener: DataChangeListener): void { 2005 } 2006 2007 unregisterDataChangeListener() { 2008 } 2009} 2010 2011@Entry 2012@Component 2013struct SwiperExample { 2014 private swiperController: SwiperController = new SwiperController(); 2015 private data: MyDataSource = new MyDataSource([]); 2016 2017 aboutToAppear(): void { 2018 let list: number[] = []; 2019 for (let i = 1; i <= 10; i++) { 2020 list.push(i); 2021 } 2022 this.data = new MyDataSource(list); 2023 } 2024 2025 build() { 2026 Column({ space: 5 }) { 2027 Swiper(this.swiperController) { 2028 LazyForEach(this.data, (item: string) => { 2029 Text(item.toString()) 2030 .width('90%') 2031 .height(160) 2032 .backgroundColor(0xAFEEEE) 2033 .textAlign(TextAlign.Center) 2034 .fontSize(30) 2035 }, (item: string) => item) 2036 } 2037 .displayCount(3, true) 2038 .autoPlay(true) 2039 .interval(4000) 2040 .loop(true) 2041 .duration(1000) 2042 .itemSpace(10) 2043 .indicator( // Set the style of the navigation indicator. 2044 new DotIndicator() 2045 .itemWidth(15) 2046 .itemHeight(15) 2047 .selectedItemWidth(15) 2048 .selectedItemHeight(15) 2049 .color(Color.Gray) 2050 .selectedColor(Color.Blue)) 2051 2052 Row({ space: 12 }) { 2053 Button('showNext') 2054 .onClick(() => { 2055 this.swiperController.showNext(); 2056 }) 2057 Button('showPrevious') 2058 .onClick(() => { 2059 this.swiperController.showPrevious(); 2060 }) 2061 }.margin(5) 2062 }.width('100%') 2063 .margin({ top: 5 }) 2064 } 2065} 2066``` 2067 2068 2069### Example 4: Customizing the Page Page Transition Animation 2070 2071This example presents how to implement a custom page transition animation for the **Swiper** component through the **customContentTransition** API. 2072 2073<!--code_no_check--> 2074 2075```ts 2076// EntryAbility.ets 2077import { Configuration, UIAbility } from '@kit.AbilityKit'; 2078import { i18n } from '@kit.LocalizationKit'; 2079import { CommonUtil } from '../common/CommonUtil'; 2080 2081export default class EntryAbility extends UIAbility { 2082 onConfigurationUpdate(newConfig: Configuration): void { 2083 // Listen for system configuration changes. 2084 if (newConfig.language) { 2085 CommonUtil.setIsRTL(i18n.isRTL(newConfig.language)); 2086 } 2087 } 2088} 2089``` 2090 2091<!--code_no_check--> 2092 2093```ts 2094// CommonUtil.ets 2095import { i18n, intl } from '@kit.LocalizationKit'; 2096 2097export class CommonUtil { 2098 private static isRTL: boolean = i18n.isRTL((new intl.Locale()).language); 2099 2100 public static setIsRTL(isRTL: boolean): void { 2101 CommonUtil.isRTL = isRTL; 2102 } 2103 2104 public static getIsRTL(): boolean { 2105 return CommonUtil.isRTL; 2106 } 2107} 2108``` 2109 2110<!--code_no_check--> 2111 2112```ts 2113// xxx.ets 2114import { CommonUtil } from '../common/CommonUtil'; 2115 2116@Entry 2117@Component 2118struct SwiperCustomAnimationExample { 2119 private DISPLAY_COUNT: number = 2; 2120 private MIN_SCALE: number = 0.75; 2121 2122 @State backgroundColors: Color[] = [Color.Green, Color.Blue, Color.Yellow, Color.Pink, Color.Gray, Color.Orange]; 2123 @State opacityList: number[] = []; 2124 @State scaleList: number[] = []; 2125 @State translateList: number[] = []; 2126 @State zIndexList: number[] = []; 2127 2128 aboutToAppear(): void { 2129 for (let i = 0; i < this.backgroundColors.length; i++) { 2130 this.opacityList.push(1.0); 2131 this.scaleList.push(1.0); 2132 this.translateList.push(0.0); 2133 this.zIndexList.push(0); 2134 } 2135 } 2136 2137 build() { 2138 Column() { 2139 Swiper() { 2140 ForEach(this.backgroundColors, (backgroundColor: Color, index: number) => { 2141 Text(index.toString()).width('100%').height('100%').fontSize(50).textAlign(TextAlign.Center) 2142 .backgroundColor(backgroundColor) 2143 // Customize how the opacity, scale, translate, and other properties change during the custom page transition animation. 2144 .opacity(this.opacityList[index]) 2145 .scale({ x: this.scaleList[index], y: this.scaleList[index] }) 2146 .translate({ x: this.translateList[index] }) 2147 .zIndex(this.zIndexList[index]) 2148 }) 2149 } 2150 .height(300) 2151 .indicator(false) 2152 .displayCount(this.DISPLAY_COUNT, true) 2153 .customContentTransition({ 2154 // The page is removed from the render tree when 1000 ms (timeout time) has elapsed. 2155 timeout: 1000, 2156 // Called on a frame-by-frame basis for all pages in the viewport. You can change the values of attributes such as opacity, scale, translate, and zIndex in the callback to implement a custom animation. 2157 transition: (proxy: SwiperContentTransitionProxy) => { 2158 if (!CommonUtil.getIsRTL()) { 2159 if (proxy.position <= proxy.index % this.DISPLAY_COUNT || proxy.position >= this.DISPLAY_COUNT + proxy.index % this.DISPLAY_COUNT) { 2160 // Reset the attribute values when a page in the same group is swiped left or is swiped right to be completely out of the viewport. 2161 this.opacityList[proxy.index] = 1.0; 2162 this.scaleList[proxy.index] = 1.0; 2163 this.translateList[proxy.index] = 0.0; 2164 this.zIndexList[proxy.index] = 0; 2165 } else { 2166 // When a page in the same group is swiped right but is still within the viewport, the attribute values of the left and right pages in the same group are changed frame by frame based on the position. The changes implement the custom page transition animation in which the two pages move close to the middle of the <Swiper> and are transparently scaled in or out. 2167 if (proxy.index % this.DISPLAY_COUNT === 0) { 2168 this.opacityList[proxy.index] = 1 - proxy.position / this.DISPLAY_COUNT; 2169 this.scaleList[proxy.index] = this.MIN_SCALE + (1 - this.MIN_SCALE) * (1 - proxy.position / this.DISPLAY_COUNT); 2170 this.translateList[proxy.index] = -proxy.position * proxy.mainAxisLength + (1 - this.scaleList[proxy.index]) * proxy.mainAxisLength / 2.0; 2171 } else { 2172 this.opacityList[proxy.index] = 1 - (proxy.position - 1) / this.DISPLAY_COUNT; 2173 this.scaleList[proxy.index] = this.MIN_SCALE + (1 - this.MIN_SCALE) * (1 - (proxy.position - 1) / this.DISPLAY_COUNT); 2174 this.translateList[proxy.index] = -(proxy.position - 1) * proxy.mainAxisLength - (1 - this.scaleList[proxy.index]) * proxy.mainAxisLength / 2.0; 2175 } 2176 this.zIndexList[proxy.index] = -1; 2177 } 2178 } else { 2179 // Layout adaptation for right-to-left scripts 2180 if (proxy.position >= -proxy.index % this.DISPLAY_COUNT || proxy.position <= -this.DISPLAY_COUNT - proxy.index % this.DISPLAY_COUNT) { 2181 // Reset the properties when a page in the same group is swiped out of the viewport. 2182 this.opacityList[proxy.index] = 1.0; 2183 this.scaleList[proxy.index] = 1.0; 2184 this.translateList[proxy.index] = 0.0; 2185 this.zIndexList[proxy.index] = 0; 2186 } else { 2187 // When a page in the same group is swiped left but is still within the viewport, modify property values frame by frame based on the position for the left and right pages in the group to achieve a custom transition animation where the two pages move toward the center of the Swiper with opacity and scaling effects. 2188 if (proxy.index % this.DISPLAY_COUNT === 0) { 2189 this.opacityList[proxy.index] = 1 + proxy.position / this.DISPLAY_COUNT; 2190 this.scaleList[proxy.index] = this.MIN_SCALE + (1 - this.MIN_SCALE) * (1 + proxy.position / this.DISPLAY_COUNT); 2191 this.translateList[proxy.index] = -proxy.position * proxy.mainAxisLength - (1 - this.scaleList[proxy.index]) * proxy.mainAxisLength / 2.0; 2192 } else { 2193 this.opacityList[proxy.index] = 1 + (proxy.position + 1) / this.DISPLAY_COUNT; 2194 this.scaleList[proxy.index] = this.MIN_SCALE + (1 - this.MIN_SCALE) * (1 + (proxy.position + 1) / this.DISPLAY_COUNT); 2195 this.translateList[proxy.index] = -(proxy.position + 1) * proxy.mainAxisLength + (1 - this.scaleList[proxy.index]) * proxy.mainAxisLength / 2.0; 2196 } 2197 this.zIndexList[proxy.index] = -1; 2198 } 2199 } 2200 } 2201 }) 2202 .onContentDidScroll((selectedIndex: number, index: number, position: number, mainAxisLength: number) => { 2203 // Listen for Swiper page scroll events. In this callback, you can customize the navigation indicator animation. 2204 console.info("onContentDidScroll selectedIndex: " + selectedIndex + ", index: " + index + ", position: " + position + ", mainAxisLength: " + mainAxisLength); 2205 }) 2206 }.width('100%') 2207 } 2208} 2209``` 2210 2211 2212### Example 5: Configuring Overflow for the Dot Indicator 2213 2214This example illustrates the activation of the overflow effect when the number of navigation dots exceeds the limit set through the **maxDisplayCount** property of the **DotIndicator** API. 2215 2216```ts 2217class MyDataSource implements IDataSource { 2218 private list: number[] = []; 2219 2220 constructor(list: number[]) { 2221 this.list = list; 2222 } 2223 2224 totalCount(): number { 2225 return this.list.length; 2226 } 2227 2228 getData(index: number): number { 2229 return this.list[index]; 2230 } 2231 2232 registerDataChangeListener(listener: DataChangeListener): void { 2233 } 2234 2235 unregisterDataChangeListener() { 2236 } 2237} 2238 2239@Entry 2240@Component 2241struct Index { 2242 private swiperController: SwiperController = new SwiperController(); 2243 private data: MyDataSource = new MyDataSource([]); 2244 2245 aboutToAppear(): void { 2246 let list: number[] = []; 2247 for (let i = 1; i <= 15; i++) { 2248 list.push(i); 2249 } 2250 this.data = new MyDataSource(list); 2251 } 2252 2253 build() { 2254 Column({ space: 5 }) { 2255 Swiper(this.swiperController) { 2256 LazyForEach(this.data, (item: string) => { 2257 Text(item.toString()) 2258 .width('90%') 2259 .height(160) 2260 .backgroundColor(0xAFEEEE) 2261 .textAlign(TextAlign.Center) 2262 .fontSize(30) 2263 }, (item: string) => item) 2264 } 2265 .cachedCount(2) 2266 .index(5) 2267 .autoPlay(true) 2268 .interval(4000) 2269 .loop(true) 2270 .duration(1000) 2271 .itemSpace(0) 2272 .indicator( // Set the style of the navigation indicator. 2273 new DotIndicator() 2274 .itemWidth(8) 2275 .itemHeight(8) 2276 .selectedItemWidth(16) 2277 .selectedItemHeight(8) 2278 .color(Color.Gray) 2279 .selectedColor(Color.Blue) 2280 .maxDisplayCount(9)) 2281 .displayArrow({ // Set the arrow style of the navigation indicator. 2282 showBackground: true, 2283 isSidebarMiddle: true, 2284 backgroundSize: 24, 2285 backgroundColor: Color.White, 2286 arrowSize: 18, 2287 arrowColor: Color.Blue 2288 }, false) 2289 .curve(Curve.Linear) 2290 Row({ space: 12 }) { 2291 Button('showNext') 2292 .onClick(() => { 2293 this.swiperController.showNext(); 2294 }) 2295 Button('showPrevious') 2296 .onClick(() => { 2297 this.swiperController.showPrevious(); 2298 }) 2299 }.margin(5) 2300 }.width('100%') 2301 .margin({ top: 5 }) 2302 } 2303} 2304``` 2305 2306 2307 2308### Example 6: Preloading Child Nodes 2309 2310This example shows how to use the **preloadItems** API to preload specified child nodes. 2311 2312```ts 2313// xxx.ets 2314import { BusinessError } from '@kit.BasicServicesKit'; 2315 2316@Entry 2317@Component 2318struct SwiperPreloadItems { 2319 @State currentIndex: number = 1; 2320 private swiperController: SwiperController = new SwiperController(); 2321 @State arr: string[] = ["0", "1", "2", "3", "4", "5"]; 2322 2323 build() { 2324 Column() { 2325 Swiper(this.swiperController) { 2326 ForEach(this.arr, (item: string) => { 2327 MyComponent({ txt: item }) 2328 }) 2329 } 2330 .cachedCount(1, true) 2331 .width("70%") 2332 .height("50%") 2333 2334 2335 Button('preload items: [2, 3]') 2336 .margin(5) 2337 .onClick(() => { 2338 // Preload child nodes with index=2 and index=3. 2339 try { 2340 this.swiperController.preloadItems([2, 3]) 2341 .then(() => { 2342 console.info('preloadItems [2, 3] success.'); 2343 }) 2344 .catch((error: BusinessError) => { 2345 console.error('preloadItems [2, 3] failed, error code: ' + error.code + ', error message: ' + error.message); 2346 }) 2347 } catch (error) { 2348 console.error('preloadItems [2, 3] failed, error code: ' + error.code + ', error message: ' + error.message); 2349 } 2350 2351 }) 2352 } 2353 .width("100%") 2354 .margin(5) 2355 } 2356} 2357 2358@Component 2359struct MyComponent { 2360 private txt: string = ""; 2361 2362 aboutToAppear(): void { 2363 console.info('aboutToAppear txt:' + this.txt); 2364 } 2365 2366 aboutToDisappear(): void { 2367 console.info('aboutToDisappear txt:' + this.txt); 2368 } 2369 2370 build() { 2371 Text(this.txt) 2372 .textAlign(TextAlign.Center) 2373 .width('100%') 2374 .height('100%') 2375 .backgroundColor(0xAFEEEE) 2376 } 2377} 2378``` 2379 2380### Example 7: Implementing Synchronized Switching Between the Tabs and Swiper Components 2381 2382This example shows how to implement synchronized switching between the **Tabs** and **Swiper** components using the **onSelected** callback. 2383 2384```ts 2385// xxx.ets 2386class MyDataSource implements IDataSource { 2387 private list: number[] = []; 2388 2389 constructor(list: number[]) { 2390 this.list = list; 2391 } 2392 2393 totalCount(): number { 2394 return this.list.length; 2395 } 2396 2397 getData(index: number): number { 2398 return this.list[index]; 2399 } 2400 2401 registerDataChangeListener(listener: DataChangeListener): void { 2402 } 2403 2404 unregisterDataChangeListener() { 2405 } 2406} 2407 2408@Entry 2409@Component 2410struct TabsSwiperExample { 2411 @State fontColor: string = '#182431'; 2412 @State selectedFontColor: string = '#007DFF'; 2413 @State currentIndex: number = 0; 2414 private list: number[] = []; 2415 private tabsController: TabsController = new TabsController(); 2416 private swiperController: SwiperController = new SwiperController(); 2417 private swiperData: MyDataSource = new MyDataSource([]); 2418 2419 aboutToAppear(): void { 2420 for (let i = 0; i <= 9; i++) { 2421 this.list.push(i); 2422 } 2423 this.swiperData = new MyDataSource(this.list); 2424 } 2425 2426 @Builder tabBuilder(index: number, name: string) { 2427 Column() { 2428 Text(name) 2429 .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor) 2430 .fontSize(16) 2431 .fontWeight(this.currentIndex === index ? 500 : 400) 2432 .lineHeight(22) 2433 .margin({ top: 17, bottom: 7 }) 2434 Divider() 2435 .strokeWidth(2) 2436 .color('#007DFF') 2437 .opacity(this.currentIndex === index ? 1 : 0) 2438 }.width('20%') 2439 } 2440 2441 build() { 2442 Column() { 2443 Tabs({ barPosition: BarPosition.Start, controller: this.tabsController }) { 2444 ForEach(this.list, (index: number) =>{ 2445 TabContent().tabBar(this.tabBuilder(index, 'Tab ' + this.list[index])) 2446 }) 2447 } 2448 .onTabBarClick((index: number) => { 2449 this.currentIndex = index; 2450 this.swiperController.changeIndex(index, true); 2451 }) 2452 .barMode(BarMode.Scrollable) 2453 .backgroundColor('#F1F3F5') 2454 .height(56) 2455 .width('100%') 2456 2457 Swiper(this.swiperController) { 2458 LazyForEach(this.swiperData, (item: string) => { 2459 Text(item.toString()) 2460 .onAppear(()=>{ 2461 console.info('onAppear ' + item.toString()); 2462 }) 2463 .onDisAppear(()=>{ 2464 console.info('onDisAppear ' + item.toString()); 2465 }) 2466 .width('100%') 2467 .height('40%') 2468 .backgroundColor(0xAFEEEE) 2469 .textAlign(TextAlign.Center) 2470 .fontSize(30) 2471 }, (item: string) => item) 2472 } 2473 .loop(false) 2474 .onSelected((index: number) => { 2475 console.info("onSelected:" + index); 2476 this.currentIndex = index; 2477 this.tabsController.changeIndex(index); 2478 }) 2479 } 2480 } 2481} 2482``` 2483 2484 2485### Example 8: Intercepting the Scrolling Behavior 2486 2487This example demonstrates how to use the **onContentWillScroll** event to allow only forward scrolling and intercept backward scrolling. 2488 2489```ts 2490// xxx.ets 2491class MyDataSource implements IDataSource { 2492 private list: number[] = []; 2493 2494 constructor(list: number[]) { 2495 this.list = list; 2496 } 2497 2498 totalCount(): number { 2499 return this.list.length; 2500 } 2501 2502 getData(index: number): number { 2503 return this.list[index]; 2504 } 2505 2506 registerDataChangeListener(listener: DataChangeListener): void { 2507 } 2508 2509 unregisterDataChangeListener() { 2510 } 2511} 2512 2513@Entry 2514@Component 2515struct SwiperExample { 2516 private swiperController: SwiperController = new SwiperController(); 2517 private data: MyDataSource = new MyDataSource([]); 2518 private currentIndex: number = 4; 2519 2520 aboutToAppear(): void { 2521 let list: number[] = []; 2522 for (let i = 1; i <= 10; i++) { 2523 list.push(i); 2524 } 2525 this.data = new MyDataSource(list); 2526 } 2527 2528 build() { 2529 Column({ space: 5 }) { 2530 Swiper(this.swiperController) { 2531 LazyForEach(this.data, (item: string) => { 2532 Text(item.toString()) 2533 .width('90%') 2534 .height(160) 2535 .backgroundColor(0xAFEEEE) 2536 .textAlign(TextAlign.Center) 2537 .fontSize(30) 2538 }, (item: string) => item) 2539 } 2540 .index(this.currentIndex) 2541 .loop(false) 2542 .onChange((index: number) => { 2543 this.currentIndex = index; 2544 }) 2545 .onContentWillScroll((result: SwiperContentWillScrollResult) => { 2546 if (result.comingIndex > this.currentIndex) { 2547 return false; 2548 } 2549 return true; 2550 }) 2551 2552 Row({ space: 12 }) { 2553 Button('showNext') 2554 .onClick(() => { 2555 this.swiperController.showNext(); 2556 }) 2557 Button('showPrevious') 2558 .onClick(() => { 2559 this.swiperController.showPrevious(); 2560 }) 2561 }.margin(5) 2562 }.width('100%') 2563 .margin({ top: 5 }) 2564 } 2565} 2566``` 2567 2568### Example 9: Using the space and bottom APIs on the Navigation Indicator 2569 2570This example demonstrates how to use the **bottom** and **space** APIs to set the spacing between the dots in a dot-style navigation indicator and the bottom margin of the **Swiper** component. 2571 2572```ts 2573import { LengthMetrics } from '@kit.ArkUI'; 2574 2575// MyDataSource.ets 2576class MyDataSource implements IDataSource { 2577 private list: number[] = []; 2578 2579 constructor(list: number[]) { 2580 this.list = list; 2581 } 2582 2583 totalCount(): number { 2584 return this.list.length; 2585 } 2586 2587 getData(index: number): number { 2588 return this.list[index]; 2589 } 2590 2591 registerDataChangeListener(listener: DataChangeListener): void { 2592 } 2593 2594 unregisterDataChangeListener() { 2595 } 2596} 2597 2598// SwiperExample.ets 2599@Entry 2600@Component 2601struct SwiperExample { 2602 2603 @State space: LengthMetrics = LengthMetrics.vp(0); 2604 @State spacePool: LengthMetrics[] = [LengthMetrics.vp(0), LengthMetrics.px(3), LengthMetrics.vp(10)]; 2605 @State spaceIndex: number = 0; 2606 2607 @State ignoreSize: boolean = false; 2608 @State ignoreSizePool: boolean[] = [false, true]; 2609 @State ignoreSizeIndex: number = 0; 2610 2611 private swiperController1: SwiperController = new SwiperController(); 2612 private data1: MyDataSource = new MyDataSource([]); 2613 2614 aboutToAppear(): void { 2615 let list1: number[] = []; 2616 for (let i = 1; i <= 10; i++) { 2617 list1.push(i); 2618 } 2619 this.data1 = new MyDataSource(list1); 2620 } 2621 2622 build() { 2623 Scroll() { 2624 Column({ space: 20 }) { 2625 Swiper(this.swiperController1) { 2626 LazyForEach(this.data1, (item: string) => { 2627 Text(item.toString()) 2628 .width('90%') 2629 .height(120) 2630 .backgroundColor(0xAFEEEE) 2631 .textAlign(TextAlign.Center) 2632 .fontSize(30) 2633 }, (item: string) => item) 2634 } 2635 .indicator(new DotIndicator() 2636 .space(this.space) 2637 .bottom(LengthMetrics.vp(0), this.ignoreSize) 2638 .itemWidth(15) 2639 .itemHeight(15) 2640 .selectedItemWidth(15) 2641 .selectedItemHeight(15) 2642 .color(Color.Gray) 2643 .selectedColor(Color.Blue)) 2644 .displayArrow({ 2645 showBackground: true, 2646 isSidebarMiddle: true, 2647 backgroundSize: 24, 2648 backgroundColor: Color.White, 2649 arrowSize: 18, 2650 arrowColor: Color.Blue 2651 }, false) 2652 2653 Column({ space: 4 }) { 2654 Button('spaceIndex:' + this.spaceIndex).onClick(() => { 2655 this.spaceIndex = (this.spaceIndex + 1) % this.spacePool.length; 2656 this.space = this.spacePool[this.spaceIndex]; 2657 }).margin(10) 2658 2659 Button('ignoreSizeIndex:' + this.ignoreSizeIndex).onClick(() => { 2660 this.ignoreSizeIndex = (this.ignoreSizeIndex + 1) % this.ignoreSizePool.length; 2661 this.ignoreSize = this.ignoreSizePool[this.ignoreSizeIndex]; 2662 }).margin(10) 2663 }.margin(2) 2664 }.width('100%') 2665 } 2666 } 2667} 2668``` 2669 2670
