未验证 提交 71057265 编写于 作者: O openharmony_ci 提交者: Gitee

!20358 DOC:修改Swiper的displayCount属性, List的lanes属性,以及Dimension修改

Merge pull request !20358 from huangdong/RM029_2
......@@ -49,9 +49,9 @@ List(value?:{space?: number | string, initialIndex?: number, scroller?
除支持[通用属性](ts-universal-attributes-size.md)外,还支持以下属性:
| 名称 | 参数类型 | 描述 |
| ----------------------------------- | ---------------------------------------- | ---------------------------------------- |
| listDirection | [Axis](ts-appendix-enums.md#axis) | 设置List组件排列方向。<br/>默认值:Axis.Vertical<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| 名称 | 参数类型 | 描述 |
| ----------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| listDirection | [Axis](ts-appendix-enums.md#axis) | 设置List组件排列方向。<br/>默认值:Axis.Vertical<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| divider | {<br/>strokeWidth:&nbsp;[Length](ts-types.md#length),<br/>color?:[ResourceColor](ts-types.md#resourcecolor),<br/>startMargin?:&nbsp;Length,<br/>endMargin?:&nbsp;Length<br/>}&nbsp;\|&nbsp;null | 设置ListItem分割线样式,默认无分割线。<br/>- strokeWidth:&nbsp;分割线的线宽。<br/>- color:&nbsp;分割线的颜色。<br/>- startMargin:&nbsp;分割线与列表侧边起始端的距离。<br/>- endMargin:&nbsp;分割线与列表侧边结束端的距离。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br/>endMargin +startMargin 不能超过列宽度。 <br/>startMargin和endMargin不支持设置百分比。<br/>List的分割线画在主轴方向两个子组件之间,第一个子组件上方和最后一个子组件下方不会绘制分割线。<br/>多列模式下,ListItem与ListItem之间的分割线起始边距从每一列的交叉轴方向起始边开始计算,其他情况从List交叉轴方向起始边开始计算。 |
| scrollBar | [BarState](ts-appendix-enums.md#barstate) | 设置滚动条状态。<br/>默认值:BarState.Off<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br/>**说明:** <br/>API version 9及以下版本默认值为BarState.Off,API version 10的默认值为BarState.Auto。 |
| cachedCount | number | 设置列表中ListItem/ListItemGroup的预加载数量,只在[LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md)中生效,其中ListItemGroup将作为一个整体进行计算,ListItemGroup中的所有ListItem会一次性全部加载出来。具体使用可参考[减少应用白块说明](../../ui/arkts-performance-improvement-recommendation.md#减少应用滑动白块)<br/>默认值:1<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br/>**说明:** <br/>单列模式下,会在List显示的ListItem前后各缓存cachedCount个ListItem。<br/>多列模式下, 会在List显示的ListItem前后各缓存cachedCount*列数个ListItem。 |
......@@ -60,7 +60,7 @@ List(value?:{space?: number&nbsp;|&nbsp;string, initialIndex?: number, scroller?
| chainAnimation | boolean | 设置当前List是否启用链式联动动效,开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果:List内的list-item间隔一定距离,在基本的滑动交互行为下,主动对象驱动从动对象进行联动,驱动效果遵循弹簧物理动效。<br/>默认值:false<br/>-&nbsp;false:不启用链式联动。<br/>-&nbsp;true:启用链式联动。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br/>**说明:**<br/>链式动效生效后,List的分割线不显示。<br>链式动效生效需要满足以下前提条件:<br> -&nbsp; List边缘效果为Spring类型<br> -&nbsp; List没有启用多列模式 |
| chainAnimationOptions<sup>10+</sup> | [ChainAnimationOptions](#chainanimationoptions10对象说明) | 设置链式联动动效参数。<br>**系统API:** 此接口为系统接口。 |
| multiSelectable<sup>8+</sup> | boolean | 是否开启鼠标框选。<br/>默认值:false<br/>-&nbsp;false:关闭框选。<br/>-&nbsp;true:开启框选。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| lanes<sup>9+</sup> | number \| [LengthConstrain](ts-types.md#lengthconstrain) | 以列模式为例(listDirection为Axis.Vertical):<br/>lanes用于决定List组件在交叉轴方向按几列布局。<br/>默认值:1<br/>规则如下:<br/>-&nbsp;lanes为指定的数量时,根据指定的数量与List组件的交叉轴尺寸除以列数作为列的宽度。<br/>-&nbsp;lanes设置了{minLength,maxLength}时,根据List组件的宽度自适应决定lanes数量(即列数),保证缩放过程中lane的宽度符合{minLength,maxLength}的限制。其中,minLength条件会被优先满足,即优先保证符合ListItem的交叉轴尺寸符合最小限制。<br/>-&nbsp;lanes设置了{minLength,maxLength},如果父组件交叉轴方向尺寸约束为无穷大时,固定按一列排列,列宽度按显示区域内最大的ListItem计算<br/>-&nbsp;ListItemGroup在多列模式下也是独占一行,ListItemGroup中的ListItem按照List组件的lanes属性设置值来布局。<br/>-&nbsp;lanes设置了{minLength,maxLength}时,计算列数会按照ListItemGroup的交叉轴尺寸计算。当ListItemGroup交叉轴尺寸与List交叉轴尺寸不一致时ListItemGroup中的列数与List中的列数可能不一样。<br/>该接口支持在ArkTS卡片中使用。 |
| lanes<sup>9+</sup> | number \| [LengthConstrain](ts-types.md#lengthconstrain),<br/>gutter<sup>10+</sup>?:[Dimension](ts-types.md#dimension) | 以列模式为例(listDirection为Axis.Vertical):<br/>lanes用于决定List组件在交叉轴方向按几列布局。<br/>默认值:1<br/>规则如下:<br/>-&nbsp;lanes为指定的数量时,根据指定的数量与List组件的交叉轴尺寸除以列数作为列的宽度。<br/>-&nbsp;lanes设置了{minLength,maxLength}时,根据List组件的宽度自适应决定lanes数量(即列数),保证缩放过程中lane的宽度符合{minLength,maxLength}的限制。其中,minLength条件会被优先满足,即优先保证符合ListItem的交叉轴尺寸符合最小限制。<br/>-&nbsp;lanes设置了{minLength,maxLength},如果父组件交叉轴方向尺寸约束为无穷大时,固定按一列排列,列宽度按显示区域内最大的ListItem计算<br/>-&nbsp;ListItemGroup在多列模式下也是独占一行,ListItemGroup中的ListItem按照List组件的lanes属性设置值来布局。<br/>-&nbsp;lanes设置了{minLength,maxLength}时,计算列数会按照ListItemGroup的交叉轴尺寸计算。当ListItemGroup交叉轴尺寸与List交叉轴尺寸不一致时ListItemGroup中的列数与List中的列数可能不一样。<br/>gutter为列间距,当列数大于1时生效。<br />该接口支持在ArkTS卡片中使用。 |
| alignListItem<sup>9+</sup> | [ListItemAlign](#listitemalign9枚举说明) | List交叉轴方向宽度大于ListItem交叉轴宽度 * lanes时,ListItem在List交叉轴方向的布局方式,默认为首部对齐。<br/>默认值:ListItemAlign.Start<br/>该接口支持在ArkTS卡片中使用。 |
| sticky<sup>9+</sup> | [StickyStyle](#stickystyle9枚举说明) | 配合[ListItemGroup](ts-container-listitemgroup.md)组件使用,设置ListItemGroup中header和footer是否要吸顶或吸底。<br/>默认值:StickyStyle.None<br/>该接口支持在ArkTS卡片中使用。<br/>**说明:**<br/>sticky属性可以设置为 StickyStyle.Header \| StickyStyle.Footer 以同时支持header吸顶和footer吸底。 |
| scrollSnapAlign<sup>10+</sup> | [ScrollSnapAlign](#scrollsnapalign10枚举说明) | 设置列表项滚动结束对齐效果。<br/>默认值:ScrollSnapAlign.NONE<br/>**说明:**<br/>只支持ListItem等高情况下,设置列表项滚动结束对齐效果。 |
......
......@@ -50,7 +50,7 @@ Swiper(controller?: SwiperController)
| 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.Linear |
| indicatorStyle<sup>(deprecated)</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: 设置选中的导航点的颜色。 <br/>从API version 8开始支持,从API version 10开始不再维护,建议使用[indicator](#indicator10对象说明)代替。 |
| displayCount<sup>8+</sup> | number\|string | 设置一页内元素显示个数。<br/>默认值:1<br/>**说明:** <br/>字符串类型仅支持设置为'auto',显示效果同SwiperDisplayMode.AutoLinear。<br/>使用number类型且设置小于等于0时,按默认值1显示。<br/>使用number类型时,子组件按照主轴均分Swiper宽度(减去displayCount-1的itemSpace)的方式进行主轴拉伸(收缩)布局。 |
| displayCount<sup>8+</sup> | number \| string \| <br />[SwiperAutoFill](#swiperautofill10)<sup>10+</sup> | 设置一页内元素显示个数。<br/>默认值:1<br/>**说明:** <br/>字符串类型仅支持设置为'auto',显示效果同SwiperDisplayMode.AutoLinear。<br/>使用number类型且设置小于等于0时,按默认值1显示。<br/>使用number类型时,子组件按照主轴均分Swiper宽度(减去displayCount-1的itemSpace)的方式进行主轴拉伸(收缩)布局。<br/> 使用SwiperAutoFill类型时,通过设置一个子组件最小宽度值minSize,会根据Swiper当前宽度和minSize值自动计算并更改一页内元素显示个数。当minSize为空或者小于等于0时,Swiper显示1列。 |
| 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/>-value: 支持设置箭头和底板样式,异常场景使用ArrowStyle对象中的默认值。<br/>\-isHoverShow:设置鼠标悬停时是否显示箭头。<br/>默认值:false<br/>**说明:**<br/>isHoverShow为false时,常驻显示箭头,支持点击翻页。<br/>isHoverShow为true时,只有在鼠标悬停时才会显示箭头,并支持点击翻页。 |
......@@ -139,7 +139,13 @@ finishAnimation(callback?: () => void): void
| arrowSize | [Length](ts-types.md#length) | 否 | 设置箭头大小。<br/>在导航点两侧显示时:<br/>默认值:18vp<br/>在组件两侧显示时:<br/>默认值:24vp<br/>**说明:**<br/>isShowBackground为true时,arrowSize为backgroundSize的3/4。<br/>不支持设置百分比。 |
| arrowColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 设置箭头颜色。<br/>默认值:\#182431 |
## SwiperAutoFill<sup>10+</sup>
自适应属性。
| 参数名 | 参数类型 | 必填项 | 参数描述 |
| ------- | -------------------- | ------ | ------------------------------------ |
| minSize | [VP](ts-types.md#VP) | 是 | 设置元素显示最小宽度。<br/>默认值:0 |
## 事件
......
......@@ -256,7 +256,7 @@
| 类型 | 说明 |
| --------------------- | -------------------------------------- |
| [PX](#px10) | 需要指定以px像素单位,如'10px'。 |
| [VP](#vp10) | 需要指定以vp像素单位,如'10vp'。|
| [VP](#vp10) | 需要指定数字或vp像素单位,如10或'10vp'。 |
| [FP](#fp10) | 需要指定以fp像素单位,如'10fp'。|
| [LPX](#lpx10) | 需要指定以lpx像素单位,如'10lpx'。|
| [Percentage](#percentage10) | 需要指定以%像素单位,如'10%'。|
......@@ -276,7 +276,7 @@
| 类型 | 说明 |
| --------------------- | -------------------------------------- |
| {number}vp | 需要指定以vp像素单位,如'10vp'。 |
| {number}vp\|number | 需要指定数字或vp像素单位,如10或'10vp'。 |
## FP<sup>10+</sup>
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册