1# ArcSwiper 2 3The **ArcSwiper** component is designed for circular screens to display child components in a carousel-like manner. 4 5> **NOTE** 6> 7> This component is supported since API version 18. Updates will be marked with a superscript to indicate their earliest API version. 8 9## Modules to Import 10 11```ts 12import { 13 ArcSwiper, 14 ArcSwiperAttribute, 15 ArcDotIndicator, 16 ArcDirection, 17 ArcSwiperController 18} from '@kit.ArkUI'; 19``` 20 21## Child Components 22 23This component can contain child components. 24 25> **NOTE** 26> 27> - Built-in components and custom components are allowed, with support for ([if/else](../../../quick-start/arkts-rendering-control-ifelse.md), [ForEach](../../../quick-start/arkts-rendering-control-foreach.md), and [LazyForEach](../../../quick-start/arkts-rendering-control-lazyforeach.md)) rendering control. 28>- Do not add or delete child components during a page turning animation. Doing so may result in child components not yet animated entering the viewport in advance and causing display exceptions. 29 30## APIs 31 32ArcSwiper(controller?: ArcSwiperController) 33 34Creates an **ArcSwiper** component. 35 36**Atomic service API**: This API can be used in atomic services since API version 18. 37 38**System capability**: SystemCapability.ArkUI.ArkUI.Circle 39 40**Parameters** 41 42| Name | Type | Mandatory| Description | 43| ---------- | ------------------------------------------- | ---- | ---------------------------------------- | 44| controller | [ArcSwiperController](#arcswipercontroller) | No | Controller bound to the component to control the page turning.| 45 46 47## Attributes 48 49In addition to the [universal attributes](ts-component-general-attributes.md), the following attributes are supported. [Menu control](ts-universal-attributes-menu.md) is not supported. 50 51### index 52 53index(index: Optional\<number>) 54 55Sets 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. 56 57**Atomic service API**: This API can be used in atomic services since API version 18. 58 59**System capability**: SystemCapability.ArkUI.ArkUI.Circle 60 61**Parameters** 62 63| Name| Type | Mandatory| Description | 64| ------ | ------ | ---- | ------------------------------------------------ | 65| index | Optional\<number> | Yes | Index of the child component currently displayed in the container.<br>Default value: **0**| 66 67### indicator 68 69indicator(style: Optional\<ArcDotIndicator | boolean>) 70 71Sets the style of the arc-shaped dot-style navigation indicator. 72 73**Atomic service API**: This API can be used in atomic services since API version 18. 74 75**System capability**: SystemCapability.ArkUI.ArkUI.Circle 76 77**Parameters** 78 79| Name| Type | Mandatory| Description | 80| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 81| style | Optional\<[ArcDotIndicator](#arcdotindicator) \| boolean> | Yes | Style of the arc-shaped dot-style navigation indicator.<br> \- **ArcDotIndicator**: properties and functionality of the arc-shaped dot-style navigation indicator.<br> \- **boolean**: whether to enable the arc-shaped dot-style navigation indicator. The value **true** means to enable the arc-shaped dot-style navigation indicator, and **false** means the opposite.<br> Default value: **true**<br> Default type: **ArcDotIndicator**| 82 83### duration 84 85duration(duration: Optional\<number>) 86 87Sets the duration of the animation for child component switching. 88 89**Atomic service API**: This API can be used in atomic services since API version 18. 90 91**System capability**: SystemCapability.ArkUI.ArkUI.Circle 92 93**Parameters** 94 95| Name| Type | Mandatory| Description | 96| ------ | ------ | ---- | ----------------------------------------------------- | 97| duration | Optional\<number> | Yes | Duration of the autoplay for child component switching.<br>Default value: **400**<br>Unit: ms| 98 99### vertical 100 101vertical(isVertical: Optional\<boolean>) 102 103Sets whether vertical swiping is used. 104 105**Atomic service API**: This API can be used in atomic services since API version 18. 106 107**System capability**: SystemCapability.ArkUI.ArkUI.Circle 108 109**Parameters** 110 111| Name| Type | Mandatory| Description | 112| ------ | ------- | ---- | ---------------------------------- | 113| isVertical | Optional\<boolean> | Yes | Whether vertical swiping is used. The value **true** means vertical swiping, and **false** means horizontal swiping.<br>Default value: **false**| 114 115### disableSwipe 116 117disableSwipe(disabled: Optional\<boolean>) 118 119Sets whether to disable the swipe feature. 120 121**Atomic service API**: This API can be used in atomic services since API version 18. 122 123**System capability**: SystemCapability.ArkUI.ArkUI.Circle 124 125**Parameters** 126 127| Name| Type | Mandatory| Description | 128| ------ | ------- | ---- | ---------------------------------------- | 129| disabled | Optional\<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**| 130 131### digitalCrownSensitivity 132 133digitalCrownSensitivity(sensitivity: Optional\<CrownSensitivity>) 134 135Sets the sensitivity to the digital crown rotation. 136 137**Atomic service API**: This API can be used in atomic services since API version 18. 138 139**System capability**: SystemCapability.ArkUI.ArkUI.Circle 140 141**Parameters** 142 143| Name| Type | Mandatory| Description | 144| ------ | ----------------------------------------------------------- | ---- | --------------------------------------------------- | 145| sensitivity | Optional\<[CrownSensitivity](ts-appendix-enums.md#crownsensitivity18)> | Yes | Sensitivity to the digital crown rotation.<br>Default value: **CrownSensitivity.LOW**| 146 147### effectMode 148 149effectMode(edgeEffect: Optional\<EdgeEffect>) 150 151Sets the effect used when the scroll boundary is reached. For details about the supported effects, see [EdgeEffect](ts-appendix-enums.md#edgeeffect). The edge effect does not take effect when set using the controller API. 152 153**Atomic service API**: This API can be used in atomic services since API version 18. 154 155**System capability**: SystemCapability.ArkUI.ArkUI.Circle 156 157**Parameters** 158 159| Name| Type | Mandatory| Description | 160| ------ | --------------------------------------------- | ---- | -------------------------------------------- | 161| edgeEffect | Optional\<[EdgeEffect](ts-appendix-enums.md#edgeeffect)> | Yes | Effect used when the component is at one of the edges.<br>Default value: **EdgeEffect.Spring**| 162 163### disableTransitionAnimation 164 165disableTransitionAnimation(disabled: Optional\<boolean>) 166 167Sets whether to disable the transition animation. 168 169**Atomic service API**: This API can be used in atomic services since API version 18. 170 171**System capability**: SystemCapability.ArkUI.ArkUI.Circle 172 173**Parameters** 174 175| Name | Type | Mandatory| Description | 176| -------- | ------------------ | ---- | --------------------------------------- | 177| disabled | Optional\<boolean> | Yes | Whether to disable the transition animation.<br>Default value: **false**, which means not to disable the transition animation.| 178 179## ArcSwiperController 180 181Implements the controller of the **ArcSwiper** component. You can bind this object to the **ArcSwiper** component and use it to control page switching. 182 183**Atomic service API**: This API can be used in atomic services since API version 18. 184 185**System capability**: SystemCapability.ArkUI.ArkUI.Circle 186 187### constructor 188 189constructor() 190 191A constructor used to create an **ArcSwiperController** instance. 192 193**Atomic service API**: This API can be used in atomic services since API version 18. 194 195**System capability**: SystemCapability.ArkUI.ArkUI.Circle 196 197### showNext 198 199showNext() 200 201Turns to the next page. Page turning occurs with the animation, whose duration is specified by [duration](#duration). 202 203**Atomic service API**: This API can be used in atomic services since API version 18. 204 205**System capability**: SystemCapability.ArkUI.ArkUI.Circle 206 207### showPrevious 208 209showPrevious() 210 211Turns to the previous page. Page turning occurs with the animation, whose duration is specified by [duration](#duration). 212 213**Atomic service API**: This API can be used in atomic services since API version 18. 214 215**System capability**: SystemCapability.ArkUI.ArkUI.Circle 216 217### finishAnimation 218 219finishAnimation(handler?: FinishAnimationHandler) 220 221Stops an animation. 222 223**Atomic service API**: This API can be used in atomic services since API version 18. 224 225**System capability**: SystemCapability.ArkUI.ArkUI.Circle 226 227**Parameters** 228 229| Name | Type | Mandatory| Description | 230| ------- | ------------------------------------------------- | ---- | ------------------------------------------------ | 231| handler | [FinishAnimationHandler](#finishanimationhandler) | No | Callback invoked when the animation stops.<br>If no value is provided, no callback is performed.| 232 233## ArcDotIndicator 234 235Provides the properties and functionality of the arc-shaped dot-style navigation indicator. 236 237**Atomic service API**: This API can be used in atomic services since API version 18. 238 239**System capability**: SystemCapability.ArkUI.ArkUI.Circle 240 241### constructor 242 243constructor() 244 245A constructor used to create an **ArcDotIndicator** instance. 246 247**Atomic service API**: This API can be used in atomic services since API version 18. 248 249**System capability**: SystemCapability.ArkUI.ArkUI.Circle 250 251### arcDirection 252 253arcDirection(direction: Optional\<ArcDirection>): ArcDotIndicator 254 255Sets the direction of the arc navigation indicator. 256 257**Atomic service API**: This API can be used in atomic services since API version 18. 258 259**System capability**: SystemCapability.ArkUI.ArkUI.Circle 260 261**Parameters** 262 263| Name | Type | Mandatory| Description | 264| --------- | ---------------------------------------- | ---- | ------------------------------------------------------------ | 265| direction | [Optional\<ArcDirection>](#arcdirection) | Yes | Direction of the arc navigation indicator.<br>Default value: **ArcDirection.SIX_CLOCK_DIRECTION** (6 o'clock direction)| 266 267**Return value** 268 269| Type | Description | 270| ----------------------------------- | ------------------------------ | 271| [ArcDotIndicator](#arcdotindicator) | Properties and functionality of the arc navigation indicator.| 272 273### itemColor 274 275itemColor(color: Optional\<ResourceColor>): ArcDotIndicator 276 277Sets the color of the unselected navigation points in the arc navigation indicator. 278 279**Atomic service API**: This API can be used in atomic services since API version 18. 280 281**System capability**: SystemCapability.ArkUI.ArkUI.Circle 282 283**Parameters** 284 285| Name| Type | Mandatory| Description | 286| ------ | ----------------------------------------------------- | ---- | ------------------------------------------------------------ | 287| color | [Optional\<ResourceColor>](ts-types.md#resourcecolor) | Yes | Color of the unselected navigation points in the arc navigation indicator.<br>Default value: **'#A9FFFFFF'**| 288 289**Return value** 290 291| Type | Description | 292| ----------------------------------- | ------------------------------ | 293| [ArcDotIndicator](#arcdotindicator) | Properties and functionality of the arc navigation indicator.| 294 295### selectedItemColor 296 297selectedItemColor(color: Optional\<ResourceColor>): ArcDotIndicator 298 299Sets the color of the selected navigation point in the arc navigation indicator. 300 301**Atomic service API**: This API can be used in atomic services since API version 18. 302 303**System capability**: SystemCapability.ArkUI.ArkUI.Circle 304 305**Parameters** 306 307| Name| Type | Mandatory| Description | 308| ------ | ----------------------------------------------------- | ---- | ------------------------------------------------------------ | 309| color | [Optional\<ResourceColor>](ts-types.md#resourcecolor) | Yes | Color of the selected navigation point in the arc navigation indicator.<br>Default value: **#FF5EA1FF**| 310 311**Return value** 312 313| Type | Description | 314| ----------------------------------- | ------------------------------ | 315| [ArcDotIndicator](#arcdotindicator) | Properties and functionality of the arc navigation indicator.| 316 317### backgroundColor 318 319backgroundColor(color: Optional\<ResourceColor>): ArcDotIndicator 320 321Sets the color of the arc navigation indicator when it is long-pressed. 322 323**Atomic service API**: This API can be used in atomic services since API version 18. 324 325**System capability**: SystemCapability.ArkUI.ArkUI.Circle 326 327**Parameters** 328 329| Name| Type | Mandatory| Description | 330| ------ | ----------------------------------------------------- | ---- | ------------------------------------------------------------ | 331| color | [Optional\<ResourceColor>](ts-types.md#resourcecolor) | Yes | Color of the arc navigation indicator when it is long-pressed.<br>Default value: **'#FF404040'**| 332 333**Return value** 334 335| Type | Description | 336| ----------------------------------- | ------------------------------ | 337| [ArcDotIndicator](#arcdotindicator) | Properties and functionality of the arc navigation indicator.| 338 339### maskColor 340 341maskColor(color: Optional\<LinearGradient>): ArcDotIndicator 342 343Sets the mask gradient color of the arc navigation indicator. 344 345**Atomic service API**: This API can be used in atomic services since API version 18. 346 347**System capability**: SystemCapability.ArkUI.ArkUI.Circle 348 349**Parameters** 350 351| Name| Type | Mandatory| Description | 352| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 353| color | [Optional\<LinearGradient>](ts-basic-components-datapanel.md#lineargradient10) | Yes | Mask gradient color of the arc indicator.<br>Default start color: **'#00000000'**<br>Default end color: **'#FF000000'**| 354 355**Return value** 356 357| Type | Description | 358| ----------------------------------- | ------------------------------ | 359| [ArcDotIndicator](#arcdotindicator) | Properties and functionality of the arc navigation indicator.| 360 361### ArcDirection 362 363Enumerates the direction of the arc navigation indicator. 364 365**Atomic service API**: This API can be used in atomic services since API version 18. 366 367**System capability**: SystemCapability.ArkUI.ArkUI.Circle 368 369| Name | Value | Description | 370| --------------------- | ---- | ----------- | 371| THREE_CLOCK_DIRECTION | 0 | 3 o'clock direction.| 372| SIX_CLOCK_DIRECTION | 1 | 6 o'clock direction.| 373| NINE_CLOCK_DIRECTION | 2 | 9 o'clock direction.| 374 375## FinishAnimationHandler 376 377type FinishAnimationHandler = () => void 378 379Defines the callback to notify the application when the animation stops playing. 380 381**Atomic service API**: This API can be used in atomic services since API version 18. 382 383**System capability**: SystemCapability.ArkUI.ArkUI.Circle 384 385## IndexChangedHandler 386 387type IndexChangedHandler = (index: number) => void 388 389Defines the callback to notify the application when the index of the currently displayed element changes. 390 391**Atomic service API**: This API can be used in atomic services since API version 18. 392 393**System capability**: SystemCapability.ArkUI.ArkUI.Circle 394 395**Parameters** 396 397| Name| Type | Mandatory| Description | 398| ------ | ------ | ---- | -------------------------------------- | 399| index | number | Yes | Index of the currently displayed element. The index is zero-based.| 400 401## AnimationStartHandler 402 403type AnimationStartHandler = (index: number, targetIndex: number, event: SwiperAnimationEvent) => void 404 405Defines the callback triggered when the switching animation starts. 406 407**Atomic service API**: This API can be used in atomic services since API version 18. 408 409**System capability**: SystemCapability.ArkUI.ArkUI.Circle 410 411**Parameters** 412 413| Name | Type | Mandatory| Description | 414| ----------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 415| index | number | Yes | Index of the currently displayed element before the animation starts (not the final index after the animation ends).| 416| targetIndex | number | Yes | Index of the target element to switch to. | 417| event | [SwiperAnimationEvent](ts-container-swiper.md#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 **ArcSwiper** along the main axis, and the hands-off velocity.| 418 419## AnimationEndHandler 420 421type AnimationEndHandler = (index: number, event: SwiperAnimationEvent) => void 422 423Defines the callback triggered when the switching animation ends. 424 425**Atomic service API**: This API can be used in atomic services since API version 18. 426 427**System capability**: SystemCapability.ArkUI.ArkUI.Circle 428 429**Parameters** 430 431| Name| Type | Mandatory| Description | 432| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 433| index | number | Yes | Index of the currently displayed element. | 434| event | [SwiperAnimationEvent](ts-container-swiper.md#swiperanimationevent10) | Yes | Extra information of the animation, which is the offset of the currently displayed element relative to the start position of the **ArcSwiper** along the main axis.| 435 436## GestureSwipeHandler 437 438type GestureSwipeHandler = (index: number, event: SwiperAnimationEvent) => void 439 440Callback triggered on a frame-by-frame basis when the page is turned by a swipe. 441 442**Atomic service API**: This API can be used in atomic services since API version 18. 443 444**System capability**: SystemCapability.ArkUI.ArkUI.Circle 445 446**Parameters** 447 448| Name| Type | Mandatory| Description | 449| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 450| index | number | Yes | Index of the currently displayed element. | 451| event | [SwiperAnimationEvent](ts-container-swiper.md#swiperanimationevent10) | Yes | Extra information of the animation, which is the offset of the currently displayed element relative to the start position of the **ArcSwiper** along the main axis.| 452 453## Events 454 455In addition to the [universal events](ts-component-general-events.md), the following events are supported. 456 457### onChange 458 459onChange(handler: Optional\<IndexChangedHandler>) 460 461Triggered when the index of the currently displayed child component changes. The return value is the index of the currently displayed child component. 462 463When the **ArcSwiper** component is used together with **LazyForEach**, the subpage UI update cannot be triggered in the **onChange** event. 464 465**Atomic service API**: This API can be used in atomic services since API version 18. 466 467**System capability**: SystemCapability.ArkUI.ArkUI.Circle 468 469**Parameters** 470 471| Name | Type | Mandatory| Description | 472| ------- | ------------------------------------------------------ | ---- | ------------------------ | 473| handler | [Optional\<IndexChangedHandler>](#indexchangedhandler) | Yes | Callback for the index of the currently displayed element.| 474 475### onAnimationStart 476 477onAnimationStart(handler: Optional\<AnimationStartHandler>) 478 479Triggered when the switching animation starts. 480 481**Atomic service API**: This API can be used in atomic services since API version 18. 482 483**System capability**: SystemCapability.ArkUI.ArkUI.Circle 484 485**Parameters** 486 487| Name | Type | Mandatory| Description | 488| ------- | ---------------------------------------------------------- | ---- | ---------------------- | 489| handler | [Optional\<AnimationStartHandler>](#animationstarthandler) | Yes | Triggered when the switching animation starts.| 490 491### onAnimationEnd 492 493onAnimationEnd(handler: Optional\<AnimationEndHandler>) 494 495Triggered when the switching animation ends. 496 497This event is triggered when the switching animation of the **ArcSwiper** component ends, whether it is caused by gesture interruption or by calling **finishAnimation** through SwiperController. The **index** parameter indicates the index after the animation ends. When the **ArcSwiper** component contains multiple columns, the index is of the leftmost element. 498 499**Atomic service API**: This API can be used in atomic services since API version 18. 500 501**System capability**: SystemCapability.ArkUI.ArkUI.Circle 502 503**Parameters** 504 505| Name | Type | Mandatory| Description | 506| ------- | ------------------------------------------------------ | ---- | -------------------------- | 507| handler | [Optional\<AnimationEndHandler>](#animationendhandler) | Yes | Triggered when the switching animation ends.| 508 509### onGestureSwipe 510 511onGestureSwipe(handler: Optional\<GestureSwipeHandler>) 512 513Triggered on a frame-by-frame basis when the page is turned by a swipe. 514 515**Atomic service API**: This API can be used in atomic services since API version 18. 516 517**System capability**: SystemCapability.ArkUI.ArkUI.Circle 518 519**Parameters** 520 521| Name | Type | Mandatory| Description | 522| ------- | ------------------------------------------------------ | ---- | -------------------------------------- | 523| handler | [Optional\<GestureSwipeHandler>](#gestureswipehandler) | Yes | Triggered on a frame-by-frame basis when the page is turned by a swipe.| 524 525### customContentTransition 526 527customContentTransition(transition: Optional\<SwiperContentAnimatedTransition>) 528 529Defines a custom switching animation. You can define custom animation attributes, such as **opacity**, **scale**, and **translate**, in the callback invoked on a frame-by-frame basis during the swiping-initiated page switching animation. 530 531During the swiping-initiated page switching animation, the [SwiperContentTransitionProxy](#swipercontenttransitionproxy) 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. 532 533**Atomic service API**: This API can be used in atomic services since API version 18. 534 535**System capability**: SystemCapability.ArkUI.ArkUI.Circle 536 537**Parameters** 538 539| Name | Type | Mandatory| Description | 540| ---------- | ------------------------------------------------------------ | ---- | --------------------------------- | 541| transition | Optional\<[SwiperContentAnimatedTransition](#swipercontentanimatedtransition)> | Yes | Information about the custom switching animation.| 542 543## SwiperContentAnimatedTransition 544 545Provides the information about the custom switching animation. 546 547**Atomic service API**: This API can be used in atomic services since API version 18. 548 549**System capability**: SystemCapability.ArkUI.ArkUI.Circle 550 551| Name| Type| Read Only| Optional| Description| 552| ------ | ---- | ---- | ---- | ---- | 553| timeout | number | No| Yes| Timeout for the custom switching 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](#swipercontenttransitionproxy) 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**.| 554| transition | Callback\<[SwiperContentTransitionProxy](#swipercontenttransitionproxy)> | No| No| Content of the custom switching animation.| 555 556## SwiperContentTransitionProxy 557 558Implements the proxy object returned during the execution of the custom switching animation of the **ArcSwiper** 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 **ArcSwiper** component that the custom animation has finished playing. 559 560**Atomic service API**: This API can be used in atomic services since API version 18. 561 562**System capability**: SystemCapability.ArkUI.ArkUI.Circle 563 564### **Properties** 565 566| Name| Type| Read Only| Optional| Description| 567| ------ | ---- | ---- | ---- | ---- | 568| selectedIndex | number | No| No| Index of the currently selected page.| 569| index | number | No| No| Index of a page in the viewport.| 570| position | number | No| No| Position of the page specified by **index** relative to the start position of the **ArcSwiper** main axis (start position of the page corresponding to **selectedIndex**).| 571| mainAxisLength | number | No| No| Length of the page specified by **index** along the main axis.| 572 573>**NOTE** 574> 575>For example, when the currently selected child component's index is **0**, in the animation process of switching from page 0 to page 1, a callback will be triggered for all pages within the viewport on each frame. 576>When there are two pages, page 0 and page 1, in the viewport, two callbacks will be triggered per frame. The first callback will have **selectedIndex** as **0**, **index** as **0**, **position** representing the movement ratio of page 0 relative to its position before the animation started at the current frame, 577>and **mainAxisLength** representing the length of page 0 along the main axis. The second callback will still have **selectedIndex** as **0**, **index** as **1**, **position** representing the movement ratio of page 1 relative to page 0 before the animation started at the current frame, 578>and **mainAxisLength** representing the length of page 1 along the main axis. 579> 580>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. 581> 582 583 584### finishTransition 585 586finishTransition(): void 587 588Notifies the **ArcSwiper** component that the custom animation has finished playing. 589 590**Atomic service API**: This API can be used in atomic services since API version 18. 591 592**System capability**: SystemCapability.ArkUI.ArkUI.Circle 593 594## Example 595 596This example demonstrates the basic functionality of the **ArcSwiper** component. 597 598```ts 599// xxx.ets 600import { 601 ArcSwiper, 602 ArcSwiperAttribute, 603 ArcDotIndicator, 604 ArcDirection, 605 ArcSwiperController 606} from '@kit.ArkUI' 607 608class MyDataSource implements IDataSource { 609 private list: Color[] = [] 610 611 constructor(list: Color[]) { 612 this.list = list 613 } 614 615 totalCount(): number { 616 return this.list.length 617 } 618 619 getData(index: number): Color { 620 return this.list[index] 621 } 622 623 registerDataChangeListener(listener: DataChangeListener): void { 624 } 625 626 unregisterDataChangeListener() { 627 } 628} 629 630@Entry 631@Component 632struct TestNewInterface { 633 @State itemSimpleColor: Color | number | string = '' 634 @State selectedItemSimpleColor: Color | number | string = '' 635 private wearableSwiperController: ArcSwiperController = new ArcSwiperController() 636 private arcDotIndicator: ArcDotIndicator = new ArcDotIndicator() 637 private data: MyDataSource = new MyDataSource([]) 638 @State backgroundColors: Color[] = [Color.Green, Color.Blue, Color.Yellow, Color.Pink, Color.White, Color.Gray, Color.Orange, Color.Transparent] 639 640 aboutToAppear(): void { 641 let list: Color[] = [] 642 for (let i = 1; i <= 6; i++) { 643 list.push(i); 644 } 645 this.data = new MyDataSource(this.backgroundColors) 646 } 647 648 build() { 649 Column() { 650 Row() { 651 ArcSwiper(this.wearableSwiperController) { 652 LazyForEach(this.data, (backgroundColor: Color, index: number) => { 653 Text(index.toString()) 654 .width(233) 655 .height(233) 656 .backgroundColor(backgroundColor) 657 .textAlign(TextAlign.Center) 658 .fontSize(30) 659 }) 660 } 661 .clip(new Circle({ width: 233, height: 233 })) 662 .effectMode(EdgeEffect.None) 663 .backgroundColor(Color.Transparent) 664 .index(0) 665 .duration(400) 666 .vertical(false) 667 .indicator(this.arcDotIndicator 668 .arcDirection(ArcDirection.SIX_CLOCK_DIRECTION) 669 .itemColor(this.itemSimpleColor) 670 .selectedItemColor(this.selectedItemSimpleColor) 671 ) 672 .disableSwipe(false) 673 .digitalCrownSensitivity(CrownSensitivity.MEDIUM) 674 .onChange((index: number) => { 675 console.info("onChange:" + index.toString()) 676 }) 677 .onAnimationStart((index: number, targetIndex: number, extraInfo: SwiperAnimationEvent) => { 678 console.info("index: " + index) 679 console.info("targetIndex: " + targetIndex) 680 console.info("current offset: " + extraInfo.currentOffset) 681 console.info("target offset: " + extraInfo.targetOffset) 682 console.info("velocity: " + extraInfo.velocity) 683 }) 684 .onAnimationEnd((index: number, extraInfo: SwiperAnimationEvent) => { 685 console.info("index: " + index) 686 console.info("current offset: " + extraInfo.currentOffset) 687 }) 688 .disableTransitionAnimation(false) 689 }.height('100%') 690 }.width('100%') 691 } 692} 693``` 694 695 696
