Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
abcb3092
D
Docs
项目概览
OpenHarmony
/
Docs
大约 1 年 前同步成功
通知
159
Star
292
Fork
28
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
Docs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
abcb3092
编写于
8月 22, 2022
作者:
L
lijuan124
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
修复Swiper组件文档缺少displayMode、effectMode属性描述,缺少finishAnimation方法描述问题
Signed-off-by:
N
lijuan124
<
lijuan124@huawei.com
>
上级
6c3828a0
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
71 addition
and
27 deletion
+71
-27
zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md
...application-dev/reference/arkui-ts/ts-container-swiper.md
+71
-27
未找到文件。
zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md
浏览文件 @
abcb3092
# Swiper
> **说明:**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
...
...
@@ -21,48 +22,91 @@
Swiper(value:{controller?: SwiperController})
-
参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ---------- | ------------------------------------- | ---- | ---- | -------------------- |
| controller |
[
SwiperController
](
#swipercontroller
)
| 否 | null | 给组件绑定一个控制器,用来控制组件翻页。 |
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ---------- | ------------------------------------- | ---- | -------------------- |
| controller |
[
SwiperController
](
#swipercontroller
)
| 否 | 给组件绑定一个控制器,用来控制组件翻页。
<br/>
默认值:null |
## 属性
不支持
[
Menu控制
](
ts-universal-attributes-menu.md
)
。
| 名称 | 参数类型 | 默认值 | 描述 |
| --------------------------- | ---------------------------------------- | ---------- | ---------------------------------------- |
| index | number | 0 | 设置当前在容器中显示的子组件的索引值。 |
| autoPlay | boolean | false | 子组件是否自动播放,自动播放状态下,导航点不可操作。 |
| interval | number | 3000 | 使用自动播放时播放的时间间隔,单位为毫秒。 |
| indicator | boolean | true | 是否启用导航点指示器。 |
| loop | boolean | true | 是否开启循环。
<br>
设置为true时表示开启循环,在LazyForEach懒循环加载模式下,加载的组件数量建议大于5个。 |
| duration | number | 400 | 子组件切换的动画时长,单位为毫秒。 |
| vertical | boolean | false | 是否为纵向滑动。 |
| itemSpace | Length | 0 | 设置子组件与子组件之间间隙。 |
| cachedCount
<sup>
8+
</sup>
| number | 1 | 设置预加载子组件个数。 |
| disableSwipe
<sup>
8+
</sup>
| boolean | false | 禁用组件滑动切换功能。 |
| curve
<sup>
8+
</sup>
|
[
Curve
](
ts-animatorproperty.md#Curve枚举说明
)
\|
string | Curve.Ease | 设置Swiper的动画曲线,默认为淡入淡出曲线,常用曲线参考
[
Curve枚举说明
](
ts-animatorproperty.md#Curve枚举说明
)
,也可以通过插值计算模块提供的接口创建自定义的Curves(
[
插值曲线对象
](
ts-interpolation-calculation.md
)
)。 |
| indicatorStyle
<sup>
8+
</sup>
| {
<br/>
left?:
Length,
<br/>
top?:
Length,
<br/>
right?:
Length,
<br/>
bottom?:
Length,
<br/>
size?:
Length,
<br/>
color?:
Color,
<br/>
selectedColor?:
Color
<br/>
} | - | 设置indicator样式:
<br/>
-
left:
设置导航点距离Swiper组件左边的距离。
<br/>
-
top:
设置导航点距离Swiper组件顶部的距离。
<br/>
-
right:
设置导航点距离Swiper组件右边的距离。
<br/>
-
bottom:
设置导航点距离Swiper组件底部的距离。
<br/>
-
size:
设置导航点的直径。
<br/>
-
color:
设置导航点的颜色。
<br/>
-
selectedColor:
设置选中的导航点的颜色。 |
| displayCount
<sup>
8+
</sup>
| number
\|
string | 1 | 设置元素显示个数。 |
| 名称 | 参数类型 | 描述 |
| --------------------------- | ---------------------------------------- | ---------------------------------------- |
| index | number | 设置当前在容器中显示的子组件的索引值。
<br/>
默认值:0 |
| autoPlay | boolean | 子组件是否自动播放,自动播放状态下,导航点不可操作。
<br/>
默认值:false |
| interval | number | 使用自动播放时播放的时间间隔,单位为毫秒。
<br/>
默认值:3000 |
| indicator | boolean | 是否启用导航点指示器。
<br/>
默认值:true |
| loop | boolean | 是否开启循环。
<br>
设置为true时表示开启循环,在LazyForEach懒循环加载模式下,加载的组件数量建议大于5个。
<br/>
默认值:true |
| duration | number | 子组件切换的动画时长,单位为毫秒。
<br/>
默认值:400 |
| vertical | boolean | 是否为纵向滑动。
<br/>
默认值:false |
| itemSpace | Length | 设置子组件与子组件之间间隙。
<br/>
默认值:0 |
| displayMode | SwiperDisplayMode | 主轴方向上元素排列的模式,优先以displayCount设置的个数显示,displayCount未设置时本属性生效。
<br/>
默认值:SwiperDisplayMode.Stretch |
| cachedCount
<sup>
8+
</sup>
| number | 设置预加载子组件个数。
<br/>
默认值:1 |
| disableSwipe
<sup>
8+
</sup>
| boolean | 禁用组件滑动切换功能。
<br/>
默认值:false |
| curve
<sup>
8+
</sup>
|
[
Curve
](
ts-animatorproperty.md#Curve枚举说明
)
\|
string | 设置Swiper的动画曲线,默认为淡入淡出曲线,常用曲线参考
[
Curve枚举说明
](
ts-animatorproperty.md#Curve枚举说明
)
,也可以通过插值计算模块提供的接口创建自定义的Curves(
[
插值曲线对象
](
ts-interpolation-calculation.md
)
)。
<br/>
默认值:Curve.Ease |
| indicatorStyle
<sup>
8+
</sup>
| {
<br/>
left?:
Length,
<br/>
top?:
Length,
<br/>
right?:
Length,
<br/>
bottom?:
Length,
<br/>
size?:
Length,
<br/>
color?:
Color,
<br/>
selectedColor?:
Color
<br/>
} | 设置indicator样式:
<br/>
-
left:
设置导航点距离Swiper组件左边的距离。
<br/>
-
top:
设置导航点距离Swiper组件顶部的距离。
<br/>
-
right:
设置导航点距离Swiper组件右边的距离。
<br/>
-
bottom:
设置导航点距离Swiper组件底部的距离。
<br/>
-
size:
设置导航点的直径。
<br/>
-
color:
设置导航点的颜色。
<br/>
-
selectedColor:
设置选中的导航点的颜色。 |
| displayCount
<sup>
8+
</sup>
| number
\|
string | 设置元素显示个数。
<br/>
默认值:1 |
| effectMode
<sup>
8+
</sup>
| EdgeEffect | 滑动效果,目前支持的滑动效果参见EdgeEffect的枚举说明。
<br/>
默认值:EdgeEffect.Spring |
## SwiperDisplayMode枚举说明
| 名称 | 描述 |
| ----------- | ------------------------------------------ |
| Stretch | Swiper滑动一页的宽度为Swiper组件自身的宽度。|
| AutoLinear | Swiper滑动一页的宽度为子组件宽度中的最大值。|
## EdgeEffect枚举说明
| 名称 | 描述 |
| ------ | ------------------------------------------------------------------------- |
| Spring | 弹性物理动效,滑动到边缘后可以通过触摸事件继续滑动一段距离,松手后回弹。 |
| Fade | 滑动到边缘后,可以通过触摸事件继续滑动一段阴影,松手后阴影回弹。 |
| None | 滑动到边缘后无效果。 |
## SwiperController
Swiper容器组件的控制器,可以将此对象绑定至Swiper组件,然后通过它控制翻页。
| 接口名称 | 功能描述 |
| ------------------- | ------ |
| showNext():void | 翻至下一页。 |
| showPrevious():void | 翻至上一页。 |
### showNext
showNext(): void
翻至下一页。
### showPrevious
showPrevious(): void
翻至上一页。
### finishAnimation
finishAnimation(callback?: () => void): void
停止播放动画。
**参数:**
| 参数名 | 参数类型 | 必填项 | 参数描述 |
| --------- | ---------- | ------ | -------- |
| callback | () => void | 是 | 动画结束的回调。 |
## 事件
| 名称 | 功能描述 |
| ---------------------------------------- | ------------------ |
| onChange(
index:
number)
=
>
void | 当前显示的组件索引变化时触发该事件。 |
### onChange
onChange(
index:
number)
=
>
void
当前显示的组件索引变化时触发该事件。
**参数:**
| 参数名 | 参数类型 | 必填项 | 参数描述 |
| --------- | ---------- | ------ | -------- |
| index | number | 是 | 当前显示元素的索引。 |
## 示例
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录