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