Skip to content

D
Docs

Coping0606 / Docs
与 Fork 源项目一致

Fork自 OpenHarmony / Docs

通知 1
Star 1
Fork 0
D
Docs

体验新版 GitCode，发现更多精彩内容 >>

未验证 提交 462d6b4c 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!8570 修复Swiper组件文档缺少displayMode、effectMode属性描述，缺少finishAnimation方法描述问题以及curve属性参数类型与ts文件不一致 

Merge pull request !8570 from 李娟/OpenHarmony-3.1-Release
上级 8b883281 d75c6921
隐藏空白更改
内联 并排
Showing with 71 addition and 43 deletion
zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md
浏览文件 @ 462d6b4c
# Swiper # Swiper
滑动容器，提供切换子组件显示的能力。
> **说明：** > **说明：**
> >
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
滑动容器，提供切换子组件显示的能力。
## 权限列表 ## 权限列表
无 无
...@@ -20,71 +22,97 @@ ...@@ -20,71 +22,97 @@
Swiper(value:{controller?: SwiperController}) Swiper(value:{controller?: SwiperController})
**参数：** **参数：**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ---------- | ------------------------------------- | ---- | -------------------- |
| controller | [SwiperController](#swipercontroller) | 否 | 给组件绑定一个控制器，用来控制组件翻页。<br/>默认值：null |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ---------- | ------------------------------------- | ---- | ---- | -------------------- |
| controller | [SwiperController](#swipercontroller) | 否 | null | 给组件绑定一个控制器，用来控制组件翻页。 |
## 属性 ## 属性
不支持[Menu控制](ts-universal-attributes-menu.md)。 不支持[Menu控制](ts-universal-attributes-menu.md)。
| 名称 | 参数类型 | 默认值 | 描述 | | 名称 | 参数类型 | 描述 |
| --------------------------- | ---------------------------------------- | ---------- | ---------------------------------------- | | --------------------------- | ---------------------------------------- | ---------------------------------------- |
| index | number | 0 | 设置当前在容器中显示的子组件的索引值。 | | index | number | 设置当前在容器中显示的子组件的索引值。<br/>默认值：0 |
| autoPlay | boolean | false | 子组件是否自动播放，自动播放状态下，导航点不可操作。 | | autoPlay | boolean | 子组件是否自动播放，自动播放状态下，导航点不可操作。<br/>默认值：false |
| interval | number | 3000 | 使用自动播放时播放的时间间隔，单位为毫秒。 | | interval | number | 使用自动播放时播放的时间间隔，单位为毫秒。<br/>默认值：3000 |
| indicator | boolean | true | 是否启用导航点指示器。 | | indicator | boolean | 是否启用导航点指示器。<br/>默认值：true |
| loop | boolean | true | 是否开启循环。<br> 设置为true时表示开启循环，在LazyForEach懒循环加载模式下，加载的组件数量建议大于5个。 | | loop | boolean | 是否开启循环。<br>设置为true时表示开启循环，在LazyForEach懒循环加载模式下，加载的组件数量建议大于5个。<br/>默认值：true |
| duration | number | 400 | 子组件切换的动画时长，单位为毫秒。 | | duration | number | 子组件切换的动画时长，单位为毫秒。<br/>默认值：400 |
| vertical | boolean | false | 是否为纵向滑动。 | | vertical | boolean | 是否为纵向滑动。<br/>默认值：false |
| itemSpace | Length | 0 | 设置子组件与子组件之间间隙。 | | itemSpace | Length | 设置子组件与子组件之间间隙。<br/>默认值：0 |
| displayMode | SwiperDisplayMode | SwiperDisplayMode.Stretch | 设置子组件显示模式。 | | displayMode | SwiperDisplayMode | 主轴方向上元素排列的模式，优先以displayCount设置的个数显示，displayCount未设置时本属性生效。<br/>默认值：SwiperDisplayMode.Stretch |
| cachedCount<sup>8+</sup> | number | 1 | 设置预加载子组件个数。 | | cachedCount<sup>8+</sup> | number | 设置预加载子组件个数。<br/>默认值：1 |
| disableSwipe<sup>8+</sup> | boolean | false | 禁用组件滑动切换功能。 | | disableSwipe<sup>8+</sup> | boolean | 禁用组件滑动切换功能。<br/>默认值：false |
| displayCount<sup>8+</sup> | number&nbsp;\|&nbsp;string | 1 | 设置一页中显示子组件的个数，设置为“auto”时等同于SwiperDisplayMode.AutoLinear的显示效果。 | | curve<sup>8+</sup> | [Curve](ts-animatorproperty.md#Curve枚举说明) \| string | 设置Swiper的动画曲线，默认为淡入淡出曲线，常用曲线参考[Curve枚举说明](ts-animatorproperty.md#Curve枚举说明)，也可以通过插值计算模块提供的接口创建自定义的Curves([插值曲线对象](ts-interpolation-calculation.md))。<br/>默认值：Curve.Ease |
| effectMode<sup>8+</sup> | EdgeEffect | EdgeEffect.Spring | 设置滑动到边缘时的显示效果。 | | indicatorStyle<sup>8+</sup> | {<br/>left?:&nbsp;Length,<br/>top?:&nbsp;Length,<br/>right?:&nbsp;Length,<br/>bottom?:&nbsp;Length,<br/>size?:&nbsp;Length,<br/>color?:&nbsp;Color,<br/>selectedColor?:&nbsp;Color<br/>} | 设置indicator样式：<br/>-&nbsp;left:&nbsp;设置导航点距离Swiper组件左边的距离。<br/>-&nbsp;top:&nbsp;设置导航点距离Swiper组件顶部的距离。<br/>-&nbsp;right:&nbsp;设置导航点距离Swiper组件右边的距离。<br/>-&nbsp;bottom:&nbsp;设置导航点距离Swiper组件底部的距离。<br/>-&nbsp;size:&nbsp;设置导航点的直径。<br/>-&nbsp;color:&nbsp;设置导航点的颜色。<br/>-&nbsp;selectedColor:&nbsp;设置选中的导航点的颜色。 |
| curve<sup>8+</sup> | [Curve](ts-appendix-enums.md#curve) \| Curves | Curve.Ease | 设置Swiper的动画曲线，默认为淡入淡出曲线，常用曲线参考[Curve枚举说明](ts-appendix-enums.md#curve)，也可以通过插值计算模块提供的接口创建自定义的Curves([插值曲线对象](ts-interpolation-calculation.md))。 | | displayCount<sup>8+</sup> | number\|string | 设置元素显示个数。<br/>默认值：1 |
| indicatorStyle<sup>8+</sup> | {<br/>left?:&nbsp;Length,<br/>top?:&nbsp;Length,<br/>right?:&nbsp;Length,<br/>bottom?:&nbsp;Length,<br/>size?:&nbsp;Length,<br/>mask?:&nbsp;boolean,<br/>color?:&nbsp;[ResourceColor](ts-types.md#resourcecolor8),<br/>selectedColor?:&nbsp;[ResourceColor](ts-types.md#resourcecolor8)<br/>} | - | 设置indicator样式：<br/>-&nbsp;left:&nbsp;设置导航点距离Swiper组件左边的距离。<br/>-&nbsp;top:&nbsp;设置导航点距离Swiper组件顶部的距离。<br/>-&nbsp;right:&nbsp;设置导航点距离Swiper组件右边的距离。<br/>-&nbsp;bottom:&nbsp;设置导航点距离Swiper组件底部的距离。<br/>-&nbsp;size:&nbsp;设置导航点的直径。<br/>-&nbsp;mask:&nbsp;设置是否显示导航点蒙层样式。<br/>-&nbsp;color:&nbsp;设置导航点的颜色。<br/>-&nbsp;selectedColor:&nbsp;设置选中的导航点的颜色。 | | effectMode<sup>8+</sup> | EdgeEffect | 滑动效果，目前支持的滑动效果参见EdgeEffect的枚举说明。<br/>默认值：EdgeEffect.Spring |
## SwiperDisplayMode枚举说明
| 名称 | 描述 |
| ----------- | ------------------------------------------ |
| Stretch | Swiper滑动一页的宽度为Swiper组件自身的宽度。|
| AutoLinear | Swiper滑动一页的宽度为子组件宽度中的最大值。|
## EdgeEffect枚举说明
| 名称 | 描述 |
| ------ | ------------------------------------------------------------------------- |
| Spring | 弹性物理动效，滑动到边缘后可以通过触摸事件继续滑动一段距离，松手后回弹。 |
| Fade | 滑动到边缘后，可以通过触摸事件继续滑动一段阴影，松手后阴影回弹。 |
| None | 滑动到边缘后无效果。 |
## SwiperController ## SwiperController
Swiper容器组件的控制器，可以将此对象绑定至Swiper组件，然后通过它控制翻页。 Swiper容器组件的控制器，可以将此对象绑定至Swiper组件，然后通过它控制翻页。
| 接口名称 | 功能描述 | ### showNext
| ------------------- | ------ |
| showNext() | 翻至下一页。 |
| showPrevious() | 翻至上一页。 |
| finishAnimation(callback?: () => void) | 停止Swiper动画。 |
## SwiperDisplayMode枚举说明 showNext(): void
| 名称 | 描述 | 翻至下一页。
| ------ | ---------------------------------------- |
| Stretch | Swiper滑动一页的宽度为Swiper组件自身的宽度。 |
| AutoLinear | Swiper滑动一页的宽度为子组件宽度中的最大值。 |
## EdgeEffect枚举说明 ### showPrevious
| 名称 | 描述 | showPrevious(): void
| ------ | ---------------------------------------- |
| Spring | 弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹。 |
| Fade | 阴影效果，滑动到边缘后会有圆弧状的阴影。 |
| None | 滑动到边缘后无效果。 |
翻至上一页。
### finishAnimation
finishAnimation(callback?: () => void): void
停止播放动画。
**参数：**
| 参数名 | 参数类型 | 必填项 | 参数描述 |
| --------- | ---------- | ------ | -------- |
| callback | () => void | 是 | 动画结束的回调。 |
## 事件 ## 事件
| 名称 | 功能描述 | ### onChange
| ---------------------------------------- | ------------------ |
| onChange(event: (index: number) => void) | 当前显示的子组件索引变化时触发该事件,返回值为当前显示的子组件的索引值。 | onChange(&nbsp;index:&nbsp;number)&nbsp;=&gt;&nbsp;void
当前显示的组件索引变化时触发该事件。
**参数：**
| 参数名 | 参数类型 | 必填项 | 参数描述 |
| --------- | ---------- | ------ | -------- |
| index | number | 是 | 当前显示元素的索引。 |
## 示例 ## 示例
``` ```ts
// xxx.ets
class MyDataSource implements IDataSource { class MyDataSource implements IDataSource {
private list: number[] = [] private list: number[] = []
private listener: DataChangeListener private listener: DataChangeListener
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或