Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
853b74ee
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,发现更多精彩内容 >>
未验证
提交
853b74ee
编写于
10月 29, 2022
作者:
L
luoying_ace
提交者:
Gitee
10月 29, 2022
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md.
Signed-off-by:
N
luoying_ace
<
luoying19@huawei.com
>
上级
64c4db6b
变更
1
显示空白变更内容
内联
并排
Showing
1 changed file
with
16 addition
and
18 deletion
+16
-18
zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md
...application-dev/reference/arkui-ts/ts-container-swiper.md
+16
-18
未找到文件。
zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md
浏览文件 @
853b74ee
...
@@ -42,7 +42,7 @@ Swiper(controller?: SwiperController)
...
@@ -42,7 +42,7 @@ Swiper(controller?: SwiperController)
| disableSwipe
<sup>
8+
</sup>
| boolean | 禁用组件滑动切换功能。
<br/>
默认值:false |
| disableSwipe
<sup>
8+
</sup>
| boolean | 禁用组件滑动切换功能。
<br/>
默认值:false |
| curve
<sup>
8+
</sup>
|
[
Curve
](
ts-appendix-enums.md#curve
)
\|
string | 设置Swiper的动画曲线,默认为淡入淡出曲线,常用曲线参考
[
Curve枚举说明
](
ts-appendix-enums.md#curve
)
,也可以通过
[
插值计算
](
../apis/js-apis-curve.md
)
模块提供的接口创建自定义的插值曲线对象。
<br/>
默认值:Curve.Ease |
| curve
<sup>
8+
</sup>
|
[
Curve
](
ts-appendix-enums.md#curve
)
\|
string | 设置Swiper的动画曲线,默认为淡入淡出曲线,常用曲线参考
[
Curve枚举说明
](
ts-appendix-enums.md#curve
)
,也可以通过
[
插值计算
](
../apis/js-apis-curve.md
)
模块提供的接口创建自定义的插值曲线对象。
<br/>
默认值:Curve.Ease |
| indicatorStyle
<sup>
8+
</sup>
| {
<br/>
left?:
[Length](ts-types.md#length),
<br/>
top?:
[Length](ts-types.md#length),
<br/>
right?:
[Length](ts-types.md#length),
<br/>
bottom?:
[Length](ts-types.md#length),
<br/>
size?:
[Length](ts-types.md#length),
<br/>
mask?:
boolean,
<br/>
color?:
[ResourceColor](ts-types.md),
<br/>
selectedColor?:
[
ResourceColor
](
ts-types.md
)
<br/>
} | 设置导航点样式:
<br/>
\-
left: 设置导航点距离Swiper组件左边的距离。
<br/>
\-
top: 设置导航点距离Swiper组件顶部的距离。
<br/>
\-
right: 设置导航点距离Swiper组件右边的距离。
<br/>
\-
bottom: 设置导航点距离Swiper组件底部的距离。
<br/>
\-
size: 设置导航点的直径。
<br/>
\-
mask: 设置是否显示导航点蒙层样式。
<br/>
\-
color: 设置导航点的颜色。
<br/>
\-
selectedColor: 设置选中的导航点的颜色。 |
| indicatorStyle
<sup>
8+
</sup>
| {
<br/>
left?:
[Length](ts-types.md#length),
<br/>
top?:
[Length](ts-types.md#length),
<br/>
right?:
[Length](ts-types.md#length),
<br/>
bottom?:
[Length](ts-types.md#length),
<br/>
size?:
[Length](ts-types.md#length),
<br/>
mask?:
boolean,
<br/>
color?:
[ResourceColor](ts-types.md),
<br/>
selectedColor?:
[
ResourceColor
](
ts-types.md
)
<br/>
} | 设置导航点样式:
<br/>
\-
left: 设置导航点距离Swiper组件左边的距离。
<br/>
\-
top: 设置导航点距离Swiper组件顶部的距离。
<br/>
\-
right: 设置导航点距离Swiper组件右边的距离。
<br/>
\-
bottom: 设置导航点距离Swiper组件底部的距离。
<br/>
\-
size: 设置导航点的直径。
<br/>
\-
mask: 设置是否显示导航点蒙层样式。
<br/>
\-
color: 设置导航点的颜色。
<br/>
\-
selectedColor: 设置选中的导航点的颜色。 |
| displayCount
<sup>
8+
</sup>
| number
\|
string | 设置元素显示个数。
<br/>
默认值:1 |
| displayCount
<sup>
8+
</sup>
| number
\|
string | 设置
一页内
元素显示个数。
<br/>
默认值:1 |
| effectMode
<sup>
8+
</sup>
|
[
EdgeEffect
](
ts-appendix-enums.md#edgeeffect
)
| 滑动效果,目前支持的滑动效果参见EdgeEffect的枚举说明。
<br/>
默认值:EdgeEffect.Spring |
| effectMode
<sup>
8+
</sup>
|
[
EdgeEffect
](
ts-appendix-enums.md#edgeeffect
)
| 滑动效果,目前支持的滑动效果参见EdgeEffect的枚举说明。
<br/>
默认值:EdgeEffect.Spring |
## SwiperDisplayMode枚举说明
## SwiperDisplayMode枚举说明
...
@@ -86,7 +86,7 @@ finishAnimation(callback?: () => void): void
...
@@ -86,7 +86,7 @@ finishAnimation(callback?: () => void): void
| 参数名 | 参数类型 | 必填项 | 参数描述 |
| 参数名 | 参数类型 | 必填项 | 参数描述 |
| --------- | ---------- | ------ | -------- |
| --------- | ---------- | ------ | -------- |
| callback | () => void |
是
| 动画结束的回调。 |
| callback | () => void |
否
| 动画结束的回调。 |
## 事件
## 事件
...
@@ -96,11 +96,11 @@ onChange(event: (index: number) => void)
...
@@ -96,11 +96,11 @@ onChange(event: (index: number) => void)
当前显示的子组件索引变化时触发该事件,返回值为当前显示的子组件的索引值。
当前显示的子组件索引变化时触发该事件,返回值为当前显示的子组件的索引值。
**
参数
:**
**
返回值
:**
|
参数名 | 参数类型 | 必填项
| 参数描述 |
|
名称 | 类型
| 参数描述 |
| --------- | ---------- | ------
| ------
-- |
| --------- | ---------- | -------- |
| index | number
| 是
| 当前显示元素的索引。 |
| index | number | 当前显示元素的索引。 |
## 示例
## 示例
...
@@ -149,36 +149,34 @@ struct SwiperExample {
...
@@ -149,36 +149,34 @@ struct SwiperExample {
Column
({
space
:
5
})
{
Column
({
space
:
5
})
{
Swiper
(
this
.
swiperController
)
{
Swiper
(
this
.
swiperController
)
{
LazyForEach
(
this
.
data
,
(
item
:
string
)
=>
{
LazyForEach
(
this
.
data
,
(
item
:
string
)
=>
{
Text
(
item
).
width
(
'
90%
'
).
height
(
160
).
backgroundColor
(
0xAFEEEE
).
textAlign
(
TextAlign
.
Center
).
fontSize
(
2
0
)
Text
(
item
).
width
(
'
90%
'
).
height
(
160
).
backgroundColor
(
0xAFEEEE
).
textAlign
(
TextAlign
.
Center
).
fontSize
(
3
0
)
},
item
=>
item
)
},
item
=>
item
)
}
}
.
cachedCount
(
2
)
.
cachedCount
(
2
)
.
index
(
1
)
.
index
(
1
)
.
autoPlay
(
true
)
.
autoPlay
(
true
)
.
interval
(
4000
)
.
interval
(
4000
)
.
indicator
(
true
)
// 默认开启指示点
.
indicator
(
true
)
.
loop
(
false
)
// 默认开启循环播放
.
loop
(
true
)
.
duration
(
1000
)
.
duration
(
1000
)
.
vertical
(
false
)
// 默认横向切换
.
itemSpace
(
0
)
.
itemSpace
(
0
)
.
curve
(
Curve
.
Linear
)
// 动画曲线
.
curve
(
Curve
.
Linear
)
.
onChange
((
index
:
number
)
=>
{
.
onChange
((
index
:
number
)
=>
{
console
.
info
(
index
.
toString
())
console
.
info
(
index
.
toString
())
})
})
Flex
({
justifyContent
:
FlexAlign
.
SpaceAround
})
{
Row
({
space
:
12
})
{
Button
(
'
n
ext
'
)
Button
(
'
showN
ext
'
)
.
onClick
(()
=>
{
.
onClick
(()
=>
{
this
.
swiperController
.
showNext
()
this
.
swiperController
.
showNext
()
})
})
Button
(
'
preview
'
)
Button
(
'
showPrevious
'
)
.
onClick
(()
=>
{
.
onClick
(()
=>
{
this
.
swiperController
.
showPrevious
()
this
.
swiperController
.
showPrevious
()
})
})
}
}.
margin
(
5
)
}.
margin
({
top
:
5
})
}.
width
(
'
100%
'
)
.
margin
({
top
:
5
})
}
}
}
}
```
```
![
zh-cn_image_0000001224621917
](
figures/zh-cn_image_0000001224621917.gif
)
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录