HarmonyOS应用开发：Swiper滑动容器
Swiper
滑动容器，提供切换子组件显示的能力。
接口
Swiper(value?:{controller?: SwiperController})
参数：
| 参数名 | 参数类型 | 必填 | 参数描述 |
|---|---|---|---|
| controller | SwiperController | 否 | 给组件绑定一个控制器，用来控制组件翻页。 |
属性
不支持Menu控制。
| 名称 | 参数类型 | 描述 |
|---|---|---|
| index | number | 设置当前在容器中显示的子组件的索引值。 默认值：0 |
| autoPlay | boolean | 子组件是否自动播放，自动播放状态下，导航点不可操作。 默认值：false |
| interval | number | 使用自动播放时播放的时间间隔，单位为毫秒。 默认值：3000 |
| indicator | boolean | 是否启用导航点指示器。 默认值：true |
| loop | boolean | 是否开启循环。 设置为true时表示开启循环，在LazyForEach懒循环加载模式下，加载的组件数量建议大于5个。 默认值：true |
| duration | number | 子组件切换的动画时长，单位为毫秒。 默认值：400 |
| vertical | boolean | 是否为纵向滑动。 默认值：false |
| itemSpace | number | string | 设置子组件与子组件之间间隙。 默认值：0 |
| displayMode | SwiperDisplayMode | 设置子组件显示模式。 默认值：SwiperDisplayMode.Stretch |
| cachedCount8+ | number | 设置预加载子组件个数。 默认值：1 |
| disableSwipe8+ | boolean | 禁用组件滑动切换功能。 默认值：false |
| displayCount8+ | number | string | 设置一页中显示子组件的个数，设置为“auto”时等同于SwiperDisplayMode.AutoLinear的显示效果。 默认值：1 |
| effectMode8+ | EdgeEffect | 设置滑动到边缘时的显示效果。 默认值：EdgeEffect.Spring |
| curve8+ | Curve | string | 设置Swiper的动画曲线，默认为淡入淡出曲线，常用曲线参考Curve枚举说明，也可以通过插值计算模块提供的接口创建自定义的Curves(插值曲线对象)。 默认值：Curve.Ease |
| indicatorStyle8+ | { left?: Length, top?: Length, right?: Length, bottom?: Length, size?: Length, mask?: boolean, color?: ResourceColor, selectedColor?: ResourceColor } |
设置导航点样式： - left: 设置导航点距离Swiper组件左边的距离。 - top: 设置导航点距离Swiper组件顶部的距离。 - right: 设置导航点距离Swiper组件右边的距离。 - bottom: 设置导航点距离Swiper组件底部的距离。 - size: 设置导航点的直径。 - mask: 设置是否显示导航点蒙层样式。 - color: 设置导航点的颜色。 - selectedColor: 设置选中的导航点的颜色。 |
SwiperDisplayMode枚举说明
| 名称 | 描述 |
|---|---|
| Stretch | Swiper滑动一页的宽度为Swiper组件自身的宽度。 |
| AutoLinear | Swiper滑动一页的宽度为子组件宽度中的最大值。 |
EdgeEffect枚举说明
| 名称 | 描述 |
|---|---|
| Spring | 弹性物理动效，滑动到边缘后可以通过触摸事件继续滑动一段距离，松手后回弹。 |
| Fade | 滑动到边缘后，可以通过触摸事件继续滑动一段阴影，松手后阴影回弹。 |
| None | 滑动到边缘后无效果。 |
SwiperController
Swiper容器组件的控制器，可以将此对象绑定至Swiper组件，然后通过它控制翻页。
showNext
showNext(): void
翻至下一页。
showPrevious
showPrevious(): void
翻至上一页。
finishAnimation
finishAnimation(callback?: () => void): void
停止播放动画。
参数：
| 参数名 | 参数类型 | 必填项 | 参数描述 |
|---|---|---|---|
| callback | () => void | 是 | 动画结束的回调。 |
事件
onChange
onChange(event: (index: number) => void)
当前显示的组件索引变化时触发该事件。
参数：
| 参数名 | 参数类型 | 必填项 | 参数描述 |
|---|---|---|---|
| index | number | 是 | 当前显示元素的索引。 |
// xxx.etsclass 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@Componentstruct SwiperExample { private swiperController: SwiperController = new SwiperController() private data: MyDataSource = new MyDataSource([]) aboutToAppear(): void { let list = [] for (var i = 1; i { Text(item).width('90%').height(160).backgroundColor(0xAFEEEE).textAlign(TextAlign.Center).fontSize(20) }, item => item) } .cachedCount(2) .index(1) .autoPlay(true) .interval(4000) .indicator(true) // 默认开启指示点 .loop(false) // 默认开启循环播放 .duration(1000) .vertical(false) // 默认横向切换 .itemSpace(0) .curve(Curve.Linear) // 动画曲线 .onChange((index: number) => { console.info(index.toString()) }) Flex({ justifyContent: FlexAlign.SpaceAround }) { Button('next') .onClick(() => { this.swiperController.showNext() }) Button('preview') .onClick(() => { this.swiperController.showPrevious() }) } }.margin({ top: 5 }) }}