diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md index 0e168c52a917ffbd28e13a58a7cd821d1c47a7b7..61a96929f696e2676cb16077ff25cb971f873e14 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md @@ -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组件排列方向。
默认值:Axis.Vertical
从API version 9开始,该接口支持在ArkTS卡片中使用。 | +| 名称 | 参数类型 | 描述 | +| ----------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | +| listDirection | [Axis](ts-appendix-enums.md#axis) | 设置List组件排列方向。
默认值:Axis.Vertical
从API version 9开始,该接口支持在ArkTS卡片中使用。 | | divider | {
strokeWidth: [Length](ts-types.md#length),
color?:[ResourceColor](ts-types.md#resourcecolor),
startMargin?: Length,
endMargin?: Length
} \| null | 设置ListItem分割线样式,默认无分割线。
- strokeWidth: 分割线的线宽。
- color: 分割线的颜色。
- startMargin: 分割线与列表侧边起始端的距离。
- endMargin: 分割线与列表侧边结束端的距离。
从API version 9开始,该接口支持在ArkTS卡片中使用。
endMargin +startMargin 不能超过列宽度。
startMargin和endMargin不支持设置百分比。
List的分割线画在主轴方向两个子组件之间,第一个子组件上方和最后一个子组件下方不会绘制分割线。
多列模式下,ListItem与ListItem之间的分割线起始边距从每一列的交叉轴方向起始边开始计算,其他情况从List交叉轴方向起始边开始计算。 | | scrollBar | [BarState](ts-appendix-enums.md#barstate) | 设置滚动条状态。
默认值:BarState.Off
从API version 9开始,该接口支持在ArkTS卡片中使用。
**说明:**
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#减少应用滑动白块)。
默认值:1
从API version 9开始,该接口支持在ArkTS卡片中使用。
**说明:**
单列模式下,会在List显示的ListItem前后各缓存cachedCount个ListItem。
多列模式下, 会在List显示的ListItem前后各缓存cachedCount*列数个ListItem。 | @@ -60,7 +60,7 @@ List(value?:{space?: number | string, initialIndex?: number, scroller? | chainAnimation | boolean | 设置当前List是否启用链式联动动效,开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果:List内的list-item间隔一定距离,在基本的滑动交互行为下,主动对象驱动从动对象进行联动,驱动效果遵循弹簧物理动效。
默认值:false
- false:不启用链式联动。
- true:启用链式联动。
从API version 9开始,该接口支持在ArkTS卡片中使用。
**说明:**
链式动效生效后,List的分割线不显示。
链式动效生效需要满足以下前提条件:
-  List边缘效果为Spring类型
-  List没有启用多列模式 | | chainAnimationOptions10+ | [ChainAnimationOptions](#chainanimationoptions10对象说明) | 设置链式联动动效参数。
**系统API:** 此接口为系统接口。 | | multiSelectable8+ | boolean | 是否开启鼠标框选。
默认值:false
- false:关闭框选。
- true:开启框选。
从API version 9开始,该接口支持在ArkTS卡片中使用。 | -| lanes9+ | number \| [LengthConstrain](ts-types.md#lengthconstrain) | 以列模式为例(listDirection为Axis.Vertical):
lanes用于决定List组件在交叉轴方向按几列布局。
默认值:1
规则如下:
- lanes为指定的数量时,根据指定的数量与List组件的交叉轴尺寸除以列数作为列的宽度。
- lanes设置了{minLength,maxLength}时,根据List组件的宽度自适应决定lanes数量(即列数),保证缩放过程中lane的宽度符合{minLength,maxLength}的限制。其中,minLength条件会被优先满足,即优先保证符合ListItem的交叉轴尺寸符合最小限制。
- lanes设置了{minLength,maxLength},如果父组件交叉轴方向尺寸约束为无穷大时,固定按一列排列,列宽度按显示区域内最大的ListItem计算
- ListItemGroup在多列模式下也是独占一行,ListItemGroup中的ListItem按照List组件的lanes属性设置值来布局。
- lanes设置了{minLength,maxLength}时,计算列数会按照ListItemGroup的交叉轴尺寸计算。当ListItemGroup交叉轴尺寸与List交叉轴尺寸不一致时ListItemGroup中的列数与List中的列数可能不一样。
该接口支持在ArkTS卡片中使用。 | +| lanes9+ | number \| [LengthConstrain](ts-types.md#lengthconstrain),
gutter10+?:[Dimension](ts-types.md#dimension) | 以列模式为例(listDirection为Axis.Vertical):
lanes用于决定List组件在交叉轴方向按几列布局。
默认值:1
规则如下:
- lanes为指定的数量时,根据指定的数量与List组件的交叉轴尺寸除以列数作为列的宽度。
- lanes设置了{minLength,maxLength}时,根据List组件的宽度自适应决定lanes数量(即列数),保证缩放过程中lane的宽度符合{minLength,maxLength}的限制。其中,minLength条件会被优先满足,即优先保证符合ListItem的交叉轴尺寸符合最小限制。
- lanes设置了{minLength,maxLength},如果父组件交叉轴方向尺寸约束为无穷大时,固定按一列排列,列宽度按显示区域内最大的ListItem计算
- ListItemGroup在多列模式下也是独占一行,ListItemGroup中的ListItem按照List组件的lanes属性设置值来布局。
- lanes设置了{minLength,maxLength}时,计算列数会按照ListItemGroup的交叉轴尺寸计算。当ListItemGroup交叉轴尺寸与List交叉轴尺寸不一致时ListItemGroup中的列数与List中的列数可能不一样。
gutter为列间距,当列数大于1时生效。
该接口支持在ArkTS卡片中使用。 | | alignListItem9+ | [ListItemAlign](#listitemalign9枚举说明) | List交叉轴方向宽度大于ListItem交叉轴宽度 * lanes时,ListItem在List交叉轴方向的布局方式,默认为首部对齐。
默认值:ListItemAlign.Start
该接口支持在ArkTS卡片中使用。 | | sticky9+ | [StickyStyle](#stickystyle9枚举说明) | 配合[ListItemGroup](ts-container-listitemgroup.md)组件使用,设置ListItemGroup中header和footer是否要吸顶或吸底。
默认值:StickyStyle.None
该接口支持在ArkTS卡片中使用。
**说明:**
sticky属性可以设置为 StickyStyle.Header \| StickyStyle.Footer 以同时支持header吸顶和footer吸底。 | | enableScrollInteraction10+ | boolean | 设置是否支持滚动手势,当设置为false时,无法通过手指或者鼠标滚动,但不影响控制器的滚动接口。
默认值:true | diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md index 972e70ed7c8470a815a89db790b32bab2801a269..108e5f6213b41aeb14267323d6573e53e34e5f85 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md @@ -50,7 +50,7 @@ Swiper(controller?: SwiperController) | disableSwipe8+ | boolean | 禁用组件滑动切换功能。
默认值:false | | curve8+ | [Curve](ts-appendix-enums.md#curve) \| string | 设置Swiper的动画曲线,默认为淡入淡出曲线,常用曲线参考[Curve枚举说明](ts-appendix-enums.md#curve),也可以通过[插值计算](../apis/js-apis-curve.md)模块提供的接口创建自定义的插值曲线对象。
默认值:Curve.Linear | | indicatorStyle(deprecated) | {
left?: [Length](ts-types.md#length),
top?: [Length](ts-types.md#length),
right?: [Length](ts-types.md#length),
bottom?: [Length](ts-types.md#length),
size?: [Length](ts-types.md#length),
mask?: boolean,
color?: [ResourceColor](ts-types.md),
selectedColor?: [ResourceColor](ts-types.md)
} | 设置导航点样式:
\- left: 设置导航点距离Swiper组件左边的距离。
\- top: 设置导航点距离Swiper组件顶部的距离。
\- right: 设置导航点距离Swiper组件右边的距离。
\- bottom: 设置导航点距离Swiper组件底部的距离。
\- size: 设置导航点的直径,不支持设置百分比。默认值:6vp。
\- mask: 设置是否显示导航点蒙层样式。
\- color: 设置导航点的颜色。
\- selectedColor: 设置选中的导航点的颜色。
从API version 8开始支持,从API version 10开始不再维护,建议使用[indicator](#indicator10对象说明)代替。 | -| displayCount8+ | number\|string | 设置一页内元素显示个数。
默认值:1
**说明:**
字符串类型仅支持设置为'auto',显示效果同SwiperDisplayMode.AutoLinear。
使用number类型且设置小于等于0时,按默认值1显示。
使用number类型时,子组件按照主轴均分Swiper宽度(减去displayCount-1的itemSpace)的方式进行主轴拉伸(收缩)布局。 | +| displayCount8+ | number \| string \|
[SwiperAutoFill](#swiperautofill10)10+ | 设置一页内元素显示个数。
默认值:1
**说明:**
字符串类型仅支持设置为'auto',显示效果同SwiperDisplayMode.AutoLinear。
使用number类型且设置小于等于0时,按默认值1显示。
使用number类型时,子组件按照主轴均分Swiper宽度(减去displayCount-1的itemSpace)的方式进行主轴拉伸(收缩)布局。
使用SwiperAutoFill类型时,通过设置一个子组件最小宽度值minSize,会根据Swiper当前宽度和minSize值自动计算并更改一页内元素显示个数。当minSize为空或者小于等于0时,Swiper显示1列。 | | effectMode8+ | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | 滑动效果,目前支持的滑动效果参见EdgeEffect的枚举说明。
默认值:EdgeEffect.Spring
**说明:**
控制器接口调用时不生效回弹。 | | displayArrow10+ | value:[ArrowStyle](#arrowstyle10) \| boolean,
isHoverShow?: boolean | 设置导航点箭头样式。
-value: 支持设置箭头和底板样式,异常场景使用ArrowStyle对象中的默认值。
\-isHoverShow:设置鼠标悬停时是否显示箭头。
默认值:false
**说明:**
isHoverShow为false时,常驻显示箭头,支持点击翻页。
isHoverShow为true时,只有在鼠标悬停时才会显示箭头,并支持点击翻页。 | @@ -139,7 +139,13 @@ finishAnimation(callback?: () => void): void | arrowSize | [Length](ts-types.md#length) | 否 | 设置箭头大小。
在导航点两侧显示时:
默认值:18vp
在组件两侧显示时:
默认值:24vp
**说明:**
isShowBackground为true时,arrowSize为backgroundSize的3/4。
不支持设置百分比。 | | arrowColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 设置箭头颜色。
默认值:\#182431 | +## SwiperAutoFill10+ +自适应属性。 + +| 参数名 | 参数类型 | 必填项 | 参数描述 | +| ------- | -------------------- | ------ | ------------------------------------ | +| minSize | [VP](ts-types.md#VP) | 是 | 设置元素显示最小宽度。
默认值:0 | ## 事件 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-types.md b/zh-cn/application-dev/reference/arkui-ts/ts-types.md index 54b73973b2ec7009e92771a864eff0638884a7c5..4625f7f71040f4d13d52cd6652073cadd8b805af 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-types.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-types.md @@ -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'。 | ## FP10+