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 }) }}