OpenHarmony开发者论坛

标题: OpenHarmony组件介绍-Swiper [打印本页]

作者: 深开鸿_王石 时间: 2024-1-2 14:41
标题: OpenHarmony组件介绍-Swiper
[md]### 背景

当我们浏览网站，相册，购物应用时，会发现有些图片会不断变化的，如图：

![image.png](https://forums-obs.openharmony.c ... ofb1rp12c3m73m9.png "image.png")

这个对应OpenHarmony应用开发就需要我们用到Swiper组件，本篇我们就此组件进行介绍。

### Swiper组件介绍

1，滑块视图容器，提供子组件滑动轮播显示的能力。

```shell
该组件从API Version 7开始支持。官方doc地址：http://test.openharmony.cn:7780/ ... ontainer-swiper.md/
```

### 简单解读

* 接口

  ```typescript
  Swiper(controller?: SwiperController)
  ```

  复制
* 参数

| 参数名 | 参数类型 | 必填项 | 参数描述       |
| -------- | ---------- | ------ | ---------------- |
| callback | () => void | 否    | 动画结束的回调。 |

* 事件

| 名称                                              | 功能描述                                                                                                                                                                                                                            |
| -------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| onChange(event: (index: number) => void)          | 当前显示的子组件索引变化时触发该事件,返回值为当前显示的子组件的索引值。 - index:当前显示元素的索引。**说明：** Swiper组件结合LazyForEach使用时，不能在onChange事件里触发子页面UI的刷新。                                        |
| onAnimationStart9+(event: (index: number) => void) | 切换动画开始时触发该回调。 - index:当前显示元素的索引。**说明：** 参数为动画开始前的index值（不是最终结束动画的index值），多列Swiper时，index为最左侧组件的索引。                                                             |
| onAnimationEnd9+(event: (index: number) => void) | 切换动画结束时触发该回调。 - index:当前显示元素的索引。**说明：** 当Swiper切换动效结束时触发，包括动画过程中手势中断，通过SwiperController调用finishAnimatio。参数为动画结束后的index值，多列Swiper时，index为最左侧组件的索引。 |

### 代码示例

```typescript
class MyDataSource implements IDataSource {
  private list: number[] = []
  private listener: DataChangeListener

  constructor(list: number[]) {
this.list = list
  }

  totalCount(): number {
return this.list.length
  }

  getData(index: number): any {
return this.list[index]
  }

  registerDataChangeListener(listener: DataChangeListener): void {
this.listener = listener
  }

  unregisterDataChangeListener() {
  }
}

@Entry
@Component
struct SwiperExample {
  private swiperController: SwiperController = new SwiperController()
  private data: MyDataSource = new MyDataSource([])
  private colist: string[] = [
"#5C2223", "#EEA2A4", "#5A191B", "#E07C82", "#5A1216", "#ED5A65",
"#C04851", "#EE3E4D", "#C02C38", "#A7535A", "#E3B4B8", "#EOA1A8",
  ]

  aboutToAppear(): void {
let list = []
for (var i = 1; i <= 10; i++) {
   list.push(i.toString());
}
this.data = new MyDataSource(list)
  }

  build() {
Column({ space: 5 }) {
   Swiper(this.swiperController) {
      LazyForEach(this.data, (item: string) => {
      Text(item).width('90%').height(160).backgroundColor(this.colist[Number(item)]).textAlign(TextAlign.Center).fontSize(30)
      }, item => item)
   }
   .cachedCount(2)
   .index(1)
   .autoPlay(true)
   .interval(4000)
   .indicator(true)
   .loop(true)
   .duration(1000)
   .itemSpace(0)
   .curve(Curve.Linear)
   .onChange((index: number) => {
      console.info(index.toString())
   })

}.width('100%')
.margin({ top: 5 })
  }
}
```

此用例可以自动滑动图片，进行滚动播放，当然也可以结合之前介绍的waterflow，容器叠加实现更高级的功能
[/md]

欢迎光临 OpenHarmony开发者论坛 (https://forums.openharmony.cn/)