提交 455a0e6d 编写于 作者: S sunjiakun

swiper doc增加说明和示例代码

Signed-off-by: Nsunjiakun <sunjiakun3@huawei.com>
上级 066201c9
...@@ -48,7 +48,7 @@ Swiper(controller?: SwiperController) ...@@ -48,7 +48,7 @@ Swiper(controller?: SwiperController)
| indicatorStyle<sup>8+</sup> | {<br/>left?:&nbsp;[Length](ts-types.md#length),<br/>top?:&nbsp;[Length](ts-types.md#length),<br/>right?:&nbsp;[Length](ts-types.md#length),<br/>bottom?:&nbsp;[Length](ts-types.md#length),<br/>size?:&nbsp;[Length](ts-types.md#length),<br/>mask?:&nbsp;boolean,<br/>color?:&nbsp;[ResourceColor](ts-types.md),<br/>selectedColor?:&nbsp;[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?:&nbsp;[Length](ts-types.md#length),<br/>top?:&nbsp;[Length](ts-types.md#length),<br/>right?:&nbsp;[Length](ts-types.md#length),<br/>bottom?:&nbsp;[Length](ts-types.md#length),<br/>size?:&nbsp;[Length](ts-types.md#length),<br/>mask?:&nbsp;boolean,<br/>color?:&nbsp;[ResourceColor](ts-types.md),<br/>selectedColor?:&nbsp;[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.
先完成此消息的编辑!
想要评论请 注册