1# ArcSwiper 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @Hu_ZeQi--> 5<!--Designer: @jiangdayuan--> 6<!--Tester: @lxl007--> 7<!--Adviser: @HelloCrease--> 8 9弧形滑块视图容器，提供子组件滑动轮播显示的能力。 10 11> **说明：** 12> 13> 该组件从API version 18开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14 15## 导入模块 16 17```ts 18import { 19 ArcSwiper, 20 ArcSwiperAttribute, 21 ArcDotIndicator, 22 ArcDirection, 23 ArcSwiperController 24} from '@kit.ArkUI'; 25``` 26 27## 子组件 28 29可以包含子组件。 30 31> **说明：** 32> 33> - 子组件类型：系统组件和自定义组件，支持渲染控制类型（[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)）。 34>- 不建议在执行翻页动画过程中增加或减少子组件，会导致未进行动画的子组件提前进入视窗，引起显示异常。 35 36## 接口 37 38ArcSwiper(controller?: ArcSwiperController) 39 40创建弧形滑块视图容器。 41 42**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 43 44**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 45 46**参数：** 47 48| 参数名 | 类型 | 必填 | 说明 | 49| ---------- | ------------------------------------------- | ---- | ---------------------------------------- | 50| controller | [ArcSwiperController](#arcswipercontroller) | 否 | 给组件绑定一个控制器，用来控制组件翻页。 | 51 52 53## 属性 54 55除支持[通用属性](ts-component-general-attributes.md)外，还支持以下属性，不支持[Menu控制](ts-universal-attributes-menu.md)。 56 57### index 58 59index(index: Optional\<number>) 60 61设置当前在容器中显示的子组件的索引值。设置小于0或大于等于子组件数量时，按照默认值0处理。 62 63**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 64 65**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 66 67**参数：** 68 69| 参数名 | 类型 | 必填 | 说明 | 70| ------ | ------ | ---- | ------------------------------------------------ | 71| index | Optional\<number> | 是 | 当前在容器中显示的子组件的索引值。<br/>默认值：0 | 72 73### indicator 74 75indicator(style: Optional\<ArcDotIndicator | boolean>) 76 77设置弧形圆点指示器样式。 78 79**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 80 81**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 82 83**参数：** 84 85| 参数名 | 类型 | 必填 | 说明 | 86| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 87| style | Optional\<[ArcDotIndicator](#arcdotindicator) \| boolean> | 是 | 弧形圆点指示器样式。<br/> \- ArcDotIndicator：弧形圆点指示器属性及功能。<br/> \- boolean：是否启用弧形圆点指示器。设置为true启用，false不启用。<br/> 默认值：true<br/> 默认类型：ArcDotIndicator | 88 89### duration 90 91duration(duration: Optional\<number>) 92 93设置子组件切换的动画时长。 94 95**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 96 97**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 98 99**参数：** 100 101| 参数名 | 类型 | 必填 | 说明 | 102| ------ | ------ | ---- | ----------------------------------------------------- | 103| duration | Optional\<number> | 是 | 子组件切换的动画时长。<br/>默认值：400<br/>单位：毫秒 | 104 105### vertical 106 107vertical(isVertical: Optional\<boolean>) 108 109设置是否为纵向滑动。 110 111**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 112 113**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 114 115**参数：** 116 117| 参数名 | 类型 | 必填 | 说明 | 118| ------ | ------- | ---- | ---------------------------------- | 119| isVertical | Optional\<boolean> | 是 | 是否为纵向滑动。true为纵向滑动，false为横向滑动。<br/>默认值：false | 120 121### disableSwipe 122 123disableSwipe(disabled: Optional\<boolean>) 124 125设置禁用组件滑动切换功能。 126 127**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 128 129**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 130 131**参数：** 132 133| 参数名 | 类型 | 必填 | 说明 | 134| ------ | ------- | ---- | ---------------------------------------- | 135| disabled | Optional\<boolean> | 是 | 禁用组件滑动切换功能。设置为true禁用，false不禁用。<br/>默认值：false | 136 137### digitalCrownSensitivity 138 139digitalCrownSensitivity(sensitivity: Optional\<CrownSensitivity>) 140 141设置旋转表冠的灵敏度。 142 143**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 144 145**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 146 147**参数：** 148 149| 参数名 | 类型 | 必填 | 说明 | 150| ------ | ----------------------------------------------------------- | ---- | --------------------------------------------------- | 151| sensitivity | Optional\<[CrownSensitivity](ts-appendix-enums.md#crownsensitivity18)> | 是 | 旋转表冠的灵敏度。<br/>默认值：CrownSensitivity.MEDIUM | 152 153### effectMode 154 155effectMode(edgeEffect: Optional\<EdgeEffect>) 156 157设置边缘滑动效果。 目前支持的滑动效果参见[EdgeEffect](ts-appendix-enums.md#edgeeffect)的枚举说明。调用控制器接口时回弹不生效。 158 159**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 160 161**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 162 163**参数：** 164 165| 参数名 | 类型 | 必填 | 说明 | 166| ------ | --------------------------------------------- | ---- | -------------------------------------------- | 167| edgeEffect | Optional\<[EdgeEffect](ts-appendix-enums.md#edgeeffect)> | 是 | 边缘滑动效果。<br/>默认值：EdgeEffect.Spring | 168 169### disableTransitionAnimation 170 171disableTransitionAnimation(disabled: Optional\<boolean>) 172 173是否关闭特殊动效效果。 174 175**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 176 177**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 178 179**参数：** 180 181| 参数名 | 类型 | 必填 | 说明 | 182| -------- | ------------------ | ---- | --------------------------------------- | 183| disabled | Optional\<boolean> | 是 | 是否关闭特殊动效效果。<br>默认值：false，不关闭特殊动效效果。 | 184 185## ArcSwiperController 186 187ArcSwiper容器组件的控制器，可以将此对象绑定至ArcSwiper组件，可以通过它控制翻页。 188 189**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 190 191**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 192 193### constructor 194 195constructor() 196 197ArcSwiperController的构造函数。 198 199**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 200 201**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 202 203### showNext 204 205showNext() 206 207翻至下一页。翻页带动效切换过程，时长通过[duration](#duration)指定。 208 209**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 210 211**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 212 213### showPrevious 214 215showPrevious() 216 217翻至上一页。翻页带动效切换过程，时长通过[duration](#duration)指定。 218 219**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 220 221**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 222 223### finishAnimation 224 225finishAnimation(handler?: FinishAnimationHandler) 226 227停止播放动画。 228 229**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 230 231**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 232 233**参数：** 234 235| 参数名 | 类型 | 必填 | 说明 | 236| ------- | ------------------------------------------------- | ---- | ------------------------------------------------ | 237| handler | [FinishAnimationHandler](#finishanimationhandler) | 否 | 动画结束的回调。<br>默认值：不传入的情况，无回调 | 238 239## ArcDotIndicator 240 241提供弧形圆点指示器属性及功能。 242 243**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 244 245**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 246 247### constructor 248 249constructor() 250 251ArcDotIndicator的构造函数。 252 253**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 254 255**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 256 257### arcDirection 258 259arcDirection(direction: Optional\<ArcDirection>): ArcDotIndicator 260 261设置弧形指示器的方向。 262 263**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 264 265**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 266 267**参数：** 268 269| 参数名 | 类型 | 必填 | 说明 | 270| --------- | ---------------------------------------- | ---- | ------------------------------------------------------------ | 271| direction | [Optional\<ArcDirection>](#arcdirection) | 是 | 设置弧形指示器的方向。<br/>默认值：ArcDirection.SIX_CLOCK_DIRECTION，6点钟方向。 | 272 273**返回值：** 274 275| 类型 | 说明 | 276| ----------------------------------- | ------------------------------ | 277| [ArcDotIndicator](#arcdotindicator) | 提供弧形圆点指示器属性及功能。 | 278 279### itemColor 280 281itemColor(color: Optional\<ResourceColor>): ArcDotIndicator 282 283设置弧形指示器中，未选中导航点的颜色。 284 285**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 286 287**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 288 289**参数：** 290 291| 参数名 | 类型 | 必填 | 说明 | 292| ------ | ----------------------------------------------------- | ---- | ------------------------------------------------------------ | 293| color | [Optional\<ResourceColor>](ts-types.md#resourcecolor) | 是 | 设置弧形指示器中，未选中导航点的颜色。<br/>默认值：'#A9FFFFFF' | 294 295**返回值：** 296 297| 类型 | 说明 | 298| ----------------------------------- | ------------------------------ | 299| [ArcDotIndicator](#arcdotindicator) | 提供弧形圆点指示器属性及功能。 | 300 301### selectedItemColor 302 303selectedItemColor(color: Optional\<ResourceColor>): ArcDotIndicator 304 305设置弧形指示器中，选中导航点的颜色。 306 307**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 308 309**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 310 311**参数：** 312 313| 参数名 | 类型 | 必填 | 说明 | 314| ------ | ----------------------------------------------------- | ---- | ------------------------------------------------------------ | 315| color | [Optional\<ResourceColor>](ts-types.md#resourcecolor) | 是 | 设置弧形指示器中，选中导航点的颜色。<br/>默认值：'#FF5EA1FF' | 316 317**返回值：** 318 319| 类型 | 说明 | 320| ----------------------------------- | ------------------------------ | 321| [ArcDotIndicator](#arcdotindicator) | 提供弧形圆点指示器属性及功能。 | 322 323### backgroundColor 324 325backgroundColor(color: Optional\<ResourceColor>): ArcDotIndicator 326 327设置弧形指示器被长按时，弧形指示器的颜色。 328 329**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 330 331**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 332 333**参数：** 334 335| 参数名 | 类型 | 必填 | 说明 | 336| ------ | ----------------------------------------------------- | ---- | ------------------------------------------------------------ | 337| color | [Optional\<ResourceColor>](ts-types.md#resourcecolor) | 是 | 设置弧形指示器被长按时，弧形指示器的颜色。<br/>默认值：'#FF404040' | 338 339**返回值：** 340 341| 类型 | 说明 | 342| ----------------------------------- | ------------------------------ | 343| [ArcDotIndicator](#arcdotindicator) | 提供弧形圆点指示器属性及功能。 | 344 345### maskColor 346 347maskColor(color: Optional\<LinearGradient>): ArcDotIndicator 348 349设置弧形指示器的遮罩渐变色。 350 351**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 352 353**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 354 355**参数：** 356 357| 参数名 | 类型 | 必填 | 说明 | 358| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 359| color | [Optional\<LinearGradient>](ts-basic-components-datapanel.md#lineargradient10) | 是 | 设置弧形指示器的遮罩渐变色。<br/>起始颜色默认值：'#00000000'<br/>结束颜色默认值：'#FF000000' | 360 361**返回值：** 362 363| 类型 | 说明 | 364| ----------------------------------- | ------------------------------ | 365| [ArcDotIndicator](#arcdotindicator) | 提供弧形圆点指示器属性及功能。 | 366 367### ArcDirection 368 369弧形方向。 370 371**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 372 373**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 374 375| 名称 | 值 | 说明 | 376| --------------------- | ---- | ----------- | 377| THREE_CLOCK_DIRECTION | 0 | 3点钟方向。 | 378| SIX_CLOCK_DIRECTION | 1 | 6点钟方向。 | 379| NINE_CLOCK_DIRECTION | 2 | 9点钟方向。 | 380 381## FinishAnimationHandler 382 383type FinishAnimationHandler = () => void 384 385停止播放动画时，告知应用。 386 387**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 388 389**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 390 391## IndexChangedHandler 392 393type IndexChangedHandler = (index: number) => void 394 395当前显示元素的索引变化时，告知应用。 396 397**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 398 399**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 400 401**参数：** 402 403| 参数名 | 类型 | 必填 | 说明 | 404| ------ | ------ | ---- | -------------------------------------- | 405| index | number | 是 | 当前显示元素的索引。index序列从0开始。 | 406 407## AnimationStartHandler 408 409type AnimationStartHandler = (index: number, targetIndex: number, event: SwiperAnimationEvent) => void 410 411切换动画开始时的回调。 412 413**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 414 415**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 416 417**参数：** 418 419| 参数名 | 类型 | 必填 | 说明 | 420| ----------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 421| index | number | 是 | 当前显示元素的索引，动画开始前的index值（不是最终结束动画的index值）。 | 422| targetIndex | number | 是 | 切换动画目标元素的索引。 | 423| event | [SwiperAnimationEvent](ts-container-swiper.md#swiperanimationevent10对象说明) | 是 | 动画相关信息，包括主轴方向上当前显示元素和目标元素相对ArcSwiper起始位置的位移，以及离手速度。 | 424 425## AnimationEndHandler 426 427type AnimationEndHandler = (index: number, event: SwiperAnimationEvent) => void 428 429切换动画结束时的回调。 430 431**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 432 433**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 434 435**参数：** 436 437| 参数名 | 类型 | 必填 | 说明 | 438| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 439| index | number | 是 | 当前显示元素的索引。 | 440| event | [SwiperAnimationEvent](ts-container-swiper.md#swiperanimationevent10对象说明) | 是 | 动画相关信息，只返回主轴方向上当前显示元素相对于ArcSwiper起始位置的位移。 | 441 442## GestureSwipeHandler 443 444type GestureSwipeHandler = (index: number, event: SwiperAnimationEvent) => void 445 446在页面跟手滑动过程中，逐帧触发的回调。 447 448**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 449 450**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 451 452**参数：** 453 454| 参数名 | 类型 | 必填 | 说明 | 455| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 456| index | number | 是 | 当前显示元素的索引。 | 457| event | [SwiperAnimationEvent](ts-container-swiper.md#swiperanimationevent10对象说明) | 是 | 动画相关信息，只返回主轴方向上当前显示元素相对于ArcSwiper起始位置的位移。 | 458 459## 事件 460 461除支持[通用事件](ts-component-general-events.md)外，还支持以下事件： 462 463### onChange 464 465onChange(handler: Optional\<IndexChangedHandler>) 466 467当前显示子组件的索引变化时触发该事件，返回值为当前显示子组件的索引值。 468 469ArcSwiper组件结合LazyForEach使用时，不能在onChange事件里触发子页面UI的刷新。 470 471**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 472 473**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 474 475**参数：** 476 477| 参数名 | 类型 | 必填 | 说明 | 478| ------- | ------------------------------------------------------ | ---- | ------------------------ | 479| handler | [Optional\<IndexChangedHandler>](#indexchangedhandler) | 是 | 当前显示元素的索引回调。 | 480 481### onAnimationStart 482 483onAnimationStart(handler: Optional\<AnimationStartHandler>) 484 485切换动画开始时触发该回调。 486 487**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 488 489**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 490 491**参数：** 492 493| 参数名 | 类型 | 必填 | 说明 | 494| ------- | ---------------------------------------------------------- | ---- | ---------------------- | 495| handler | [Optional\<AnimationStartHandler>](#animationstarthandler) | 是 | 切换动画开始时的回调。 | 496 497### onAnimationEnd 498 499onAnimationEnd(handler: Optional\<AnimationEndHandler>) 500 501切换动画结束时触发该回调。 502 503当ArcSwiper切换动效结束时触发，包括动画过程中手势中断，通过SwiperController调用finishAnimation。参数为动画结束后的index值，多列ArcSwiper时，index为最左侧组件的索引。 504 505**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 506 507**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 508 509**参数：** 510 511| 参数名 | 类型 | 必填 | 说明 | 512| ------- | ------------------------------------------------------ | ---- | -------------------------- | 513| handler | [Optional\<AnimationEndHandler>](#animationendhandler) | 是 | 切换动画结束时触发该回调。 | 514 515### onGestureSwipe 516 517onGestureSwipe(handler: Optional\<GestureSwipeHandler>) 518 519在页面跟手滑动过程中，逐帧触发该回调。 520 521**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 522 523**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 524 525**参数：** 526 527| 参数名 | 类型 | 必填 | 说明 | 528| ------- | ------------------------------------------------------ | ---- | -------------------------------------- | 529| handler | [Optional\<GestureSwipeHandler>](#gestureswipehandler) | 是 | 在页面跟手滑动过程中，逐帧触发该回调。 | 530 531### customContentTransition 532 533customContentTransition(transition: Optional\<SwiperContentAnimatedTransition>) 534 535自定义ArcSwiper页面切换动画。在页面跟手滑动和离手后执行切换动画的过程中，会对视窗内所有页面逐帧触发回调。开发者可以在回调中设置透明度、缩放比例、位移等属性来自定义切换动画。 536 537在页面跟手滑动和离手后执行切换动画的过程中，会对视窗内所有页面逐帧触发[SwiperContentTransitionProxy](#swipercontenttransitionproxy)回调。例如，当视窗内有下标为0、1的两个页面时，会每帧触发两次index值分别为0和1的回调。 538 539**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 540 541**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 542 543**参数：** 544 545| 参数名 | 类型 | 必填 | 说明 | 546| ---------- | ------------------------------------------------------------ | ---- | --------------------------------- | 547| transition | Optional\<[SwiperContentAnimatedTransition](#swipercontentanimatedtransition)> | 是 | ArcSwiper自定义切换动画相关信息。 | 548 549## SwiperContentAnimatedTransition 550 551ArcSwiper自定义切换动画相关信息。 552 553**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 554 555**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 556 557| 名称 | 类型 | 只读 | 可选 | 说明 | 558| ------ | ---- | ---- | ---- | ---- | 559| timeout | number | 否 | 是 | ArcSwiper自定义切换动画超时时间。从页面执行默认动画（页面滑动）至移出视窗外的第一帧开始计时，如果到达该时间后，开发者仍未调用[SwiperContentTransitionProxy](#swipercontenttransitionproxy)的finishTransition接口通知ArcSwiper组件此页面的自定义动画已结束，那么组件就会认为此页面的自定义动画已结束，立即在该页面节点下渲染树。单位ms，默认值为0。 | 560| transition | Callback\<[SwiperContentTransitionProxy](#swipercontenttransitionproxy)> | 否 | 否 | 自定义切换动画具体内容。 | 561 562## SwiperContentTransitionProxy 563 564ArcSwiper自定义切换动画执行过程中，返回给开发者的proxy对象。开发者可通过该对象获取自定义动画视窗内的页面信息，同时，也可以通过调用该对象的finishTransition接口通知ArcSwiper组件页面自定义动画已结束。 565 566**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 567 568**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 569 570### **属性** 571 572| 名称 | 类型 | 只读 | 可选 | 说明 | 573| ------ | ---- | ---- | ---- | ---- | 574| selectedIndex | number | 否 | 否 | 当前选中页面的索引。 | 575| index | number | 否 | 否 | 视窗内页面的索引。 | 576| position | number | 否 | 否 | index页面相对于ArcSwiper主轴起始位置（selectedIndex对应页面的起始位置）的移动比例。 | 577| mainAxisLength | number | 否 | 否 | index对应页面在主轴方向上的长度。 | 578 579>**说明：** 580> 581>假设当前选中的子组件的索引为0，从第0页切换到第1页的动画过程中，每帧都会对视窗内所有页面触发回调，当视窗内有第0 582>页和第1页两页时，每帧会触发两次回调。其中第一次回调的selectedIndex为0，index为0，position为当前帧第0页相对于动画开 583>始前第0页的移动比例，mainAxisLength为主轴方向上第0页的长度；第二次回调的selectedIndex仍为0，index为1，position为当 584>前帧第1页相对于动画开始前第0页的移动比例，mainAxisLength为主轴方向上第1页的长度。 585> 586>若动画曲线为弹簧插值曲线，从第0页切换到第1页的动画过程中，可能会因为离手时的位置和速度，先过滑到第2页，再回弹到 587>第1页，该过程中每帧会对视窗内第1页和第2页触发回调。 588 589 590### finishTransition 591 592finishTransition(): void 593 594通知ArcSwiper组件，此页面的自定义动画已结束。 595 596**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 597 598**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 599 600## 示例 601 602该示例通过设置arcSwiper的基本属性，展示了组件的基本功能。 603 604```ts 605// xxx.ets 606import { 607 CircleShape, 608 ArcSwiper, 609 ArcSwiperAttribute, // ArcSwiper的属性依赖ArcSwiperAttribute对象导入，不建议删除该对象的引入。 610 ArcDotIndicator, 611 ArcDirection, 612 ArcSwiperController 613} from '@kit.ArkUI'; 614 615class MyDataSource implements IDataSource { 616 private list: Color[] = []; 617 618 constructor(list: Color[]) { 619 this.list = list; 620 } 621 622 totalCount(): number { 623 return this.list.length; 624 } 625 626 getData(index: number): Color { 627 return this.list[index]; 628 } 629 630 registerDataChangeListener(listener: DataChangeListener): void { 631 } 632 633 unregisterDataChangeListener() { 634 } 635} 636 637@Entry 638@Component 639struct TestNewInterface { 640 @State itemSimpleColor: Color | number | string = ''; 641 @State selectedItemSimpleColor: Color | number | string = ''; 642 private wearableSwiperController: ArcSwiperController = new ArcSwiperController(); 643 private arcDotIndicator: ArcDotIndicator = new ArcDotIndicator(); 644 private data: MyDataSource = new MyDataSource([]); 645 @State backgroundColors: Color[] = 646 [Color.Green, Color.Blue, Color.Yellow, Color.Pink, Color.White, Color.Gray, Color.Orange, Color.Transparent]; 647 innerSelectedIndex: number = 0; 648 649 aboutToAppear(): void { 650 let list: Color[] = []; 651 for (let i = 1; i <= 6; i++) { 652 list.push(i); 653 } 654 this.data = new MyDataSource(this.backgroundColors); 655 } 656 657 build() { 658 Column() { 659 Row() { 660 ArcSwiper(this.wearableSwiperController) { 661 LazyForEach(this.data, (backgroundColor: Color, index: number) => { 662 Text(index.toString()) 663 .width(233) 664 .height(233) 665 .backgroundColor(backgroundColor) 666 .textAlign(TextAlign.Center) 667 .fontSize(30) 668 }) 669 } 670 .clipShape(new CircleShape({ width: 233, height: 233 })) 671 .effectMode(EdgeEffect.None) 672 .backgroundColor(Color.Transparent) 673 .index(0) 674 .duration(400) 675 .vertical(false) 676 .indicator(this.arcDotIndicator 677 .arcDirection(ArcDirection.SIX_CLOCK_DIRECTION) 678 .itemColor(this.itemSimpleColor) 679 .selectedItemColor(this.selectedItemSimpleColor) 680 ) 681 .disableSwipe(false) 682 .digitalCrownSensitivity(CrownSensitivity.MEDIUM) 683 .onChange((index: number) => { 684 console.info("onChange:" + index.toString()); 685 }) 686 .onAnimationStart((index: number, targetIndex: number, extraInfo: SwiperAnimationEvent) => { 687 this.innerSelectedIndex = targetIndex; 688 console.info("index: " + index); 689 console.info("targetIndex: " + targetIndex); 690 console.info("current offset: " + extraInfo.currentOffset); 691 console.info("target offset: " + extraInfo.targetOffset); 692 console.info("velocity: " + extraInfo.velocity); 693 }) 694 .onGestureRecognizerJudgeBegin((event: BaseGestureEvent, current: GestureRecognizer, 695 others: Array<GestureRecognizer>): GestureJudgeResult => { // 在识别器即将要成功时，根据当前组件状态，设置识别器使能状态 696 if (current) { 697 let target = current.getEventTargetInfo(); 698 if (target && current.isBuiltIn() && current.getType() == GestureControl.GestureType.PAN_GESTURE) { 699 // 此处判断swiperTarget.isBegin()或innerSelectedIndex === 0，表明ArcSwiper滑动到开头 700 let swiperTarget = target as ScrollableTargetInfo 701 if (swiperTarget instanceof ScrollableTargetInfo && 702 (swiperTarget.isBegin() || this.innerSelectedIndex === 0)) { 703 let panEvent = event as PanGestureEvent; 704 if (panEvent && panEvent.offsetX > 0 && (swiperTarget.isBegin() || this.innerSelectedIndex === 0)) { 705 return GestureJudgeResult.REJECT; 706 } 707 } 708 } 709 } 710 return GestureJudgeResult.CONTINUE; 711 }) 712 .onAnimationEnd((index: number, extraInfo: SwiperAnimationEvent) => { 713 console.info("index: " + index); 714 console.info("current offset: " + extraInfo.currentOffset); 715 }) 716 .disableTransitionAnimation(false) 717 }.height('100%') 718 }.width('100%') 719 } 720} 721``` 722 723 724
