Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
455a0e6d
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看板
提交
455a0e6d
编写于
6月 09, 2023
作者:
S
sunjiakun
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
swiper doc增加说明和示例代码
Signed-off-by:
N
sunjiakun
<
sunjiakun3@huawei.com
>
上级
066201c9
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
8 addition
and
1 deletion
+8
-1
zh-cn/application-dev/reference/arkui-ts/figures/swiper.gif
zh-cn/application-dev/reference/arkui-ts/figures/swiper.gif
+0
-0
zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md
...application-dev/reference/arkui-ts/ts-container-swiper.md
+8
-1
未找到文件。
zh-cn/application-dev/reference/arkui-ts/figures/swiper.gif
查看替换文件 @
066201c9
浏览文件 @
455a0e6d
1.0 MB
|
W:
|
H:
163.8 KB
|
W:
|
H:
2-up
Swipe
Onion skin
zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md
浏览文件 @
455a0e6d
...
@@ -48,7 +48,7 @@ Swiper(controller?: SwiperController)
...
@@ -48,7 +48,7 @@ Swiper(controller?: SwiperController)
| 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: 设置导航点的直径,不支持设置百分比。默认值:6vp。
<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: 设置导航点的直径,不支持设置百分比。默认值:6vp。
<br/>
\-
mask: 设置是否显示导航点蒙层样式。
<br/>
\-
color: 设置导航点的颜色。
<br/>
\-
selectedColor: 设置选中的导航点的颜色。 |
| displayCount
<sup>
8+
</sup>
| number
\|
string | 设置一页内元素显示个数。
<br/>
默认值:1
<br/>
**说明:**
<br/>
字符串类型仅支持设置为'auto',显示效果同SwiperDisplayMode.AutoLinear。
<br/>
使用number类型时,子组件按照主轴均分Swiper宽度(减去displayCount-1的itemSpace)的方式进行主轴拉伸(收缩)布局。 |
| displayCount
<sup>
8+
</sup>
| number
\|
string | 设置一页内元素显示个数。
<br/>
默认值:1
<br/>
**说明:**
<br/>
字符串类型仅支持设置为'auto',显示效果同SwiperDisplayMode.AutoLinear。
<br/>
使用number类型时,子组件按照主轴均分Swiper宽度(减去displayCount-1的itemSpace)的方式进行主轴拉伸(收缩)布局。 |
| effectMode
<sup>
8+
</sup>
|
[
EdgeEffect
](
ts-appendix-enums.md#edgeeffect
)
| 滑动效果,目前支持的滑动效果参见EdgeEffect的枚举说明。
<br/>
默认值:EdgeEffect.Spring
<br/>
**说明:**
<br/>
控制器接口调用时不生效回弹。 |
| effectMode
<sup>
8+
</sup>
|
[
EdgeEffect
](
ts-appendix-enums.md#edgeeffect
)
| 滑动效果,目前支持的滑动效果参见EdgeEffect的枚举说明。
<br/>
默认值:EdgeEffect.Spring
<br/>
**说明:**
<br/>
控制器接口调用时不生效回弹。 |
| displayArrow
<sup>
10+
</sup>
| value:
[
ArrowStyle
](
#arrowstyle10
)
\|
boolean,
<br/>
isHoverShow?: boolean | 设置导航点箭头样式。
<br/>
默认值:false
<br/>
isHoverShow:鼠标悬停时显示箭头
|
| displayArrow
<sup>
10+
</sup>
| value:
[
ArrowStyle
](
#arrowstyle10
对象说明
)
\|
boolean,
<br/>
isHoverShow?: boolean | 设置导航点箭头样式。
<br/>
默认值:false
<br/>
isHoverShow:鼠标悬停时显示箭头。
<br/>
默认值:false
|
## SwiperDisplayMode枚举说明
## SwiperDisplayMode枚举说明
...
@@ -204,6 +204,13 @@ struct SwiperExample {
...
@@ -204,6 +204,13 @@ struct SwiperExample {
.
loop
(
true
)
.
loop
(
true
)
.
duration
(
1000
)
.
duration
(
1000
)
.
itemSpace
(
0
)
.
itemSpace
(
0
)
.
displayArrow
({
isShowBackground
:
true
,
isSidebarMiddle
:
true
,
backgroundSize
:
24
,
backgroundColor
:
Color
.
White
,
arrowSize
:
18
,
arrowColor
:
Color
.
Blue
},
false
)
.
curve
(
Curve
.
Linear
)
.
curve
(
Curve
.
Linear
)
.
onChange
((
index
:
number
)
=>
{
.
onChange
((
index
:
number
)
=>
{
console
.
info
(
index
.
toString
())
console
.
info
(
index
.
toString
())
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录