From 3cf450b526c6bc63ae117dc91a9c3c6bf9d6f419 Mon Sep 17 00:00:00 2001 From: sienna1128 Date: Tue, 13 Sep 2022 20:39:36 +0800 Subject: [PATCH] update docs Signed-off-by: sienna1128 --- .../reference/arkui-ts/ts-container-list.md | 66 +++++++++---------- .../arkui-ts/ts-container-listitem.md | 15 ++--- .../arkui-ts/ts-container-listitemgroup.md | 4 -- 3 files changed, 39 insertions(+), 46 deletions(-) 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 228bab9ac4..eda37c908b 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 @@ -9,10 +9,6 @@ 列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。 -## 权限列表 - -无 - ## 子组件 @@ -26,7 +22,7 @@ List(value:{space?: number | string, initialIndex?: number, scroller?: Scroller} - 参数 | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | -------- | -------- | -------- | -------- | -------- | - | space | [Length](../../ui/ts-types.md#length) | 否 | 0 | 列表项间距。 | + | space | number \| string | 否 | 0 | 列表项间距。 | | initialIndex | number | 否 | 0 | 设置当前List初次加载时视口起始位置显示的item，即显示第一个item，如设置的序号超过了最后一个item的序号，则设置不生效。 | | scroller | [Scroller](ts-container-scroll.md#scroller) | 否 | - | 可滚动组件的控制器。用于与可滚动组件进行绑定。 | @@ -35,7 +31,7 @@ List(value:{space?: number | string, initialIndex?: number, scroller?: Scroller} | 名称 | 参数类型 | 默认值 | 描述 | | -------- | -------- | -------- | -------- | -| listDirection | [Axis](ts-appendix-enums.md#axis) | Vertical | 设置List组件排列方向参照Axis枚举说明。 | +| listDirection | [Axis](ts-appendix-enums.md#axis) | Axis.Vertical | 设置List组件排列方向参照Axis枚举说明。 | | divider | {
strokeWidth: Length,
color?:[ResourceColor](../../ui/ts-types.md),
startMargin?: Length,
endMargin?: Length
} | - | 用于设置ListItem分割线样式，默认无分割线。
strokeWidth: 分割线的线宽。
color: 分割线的颜色。
startMargin： 分割线距离列表侧边起始端的距离。
endMargin: 分割线距离列表侧边结束端的距离。 | | scrollBar | [BarState](ts-appendix-enums.md#barstate) | BarState.Off | 设置滚动条状态。 | | cachedCount | number | 1 | 设置预加载的ListItem的数量。 | @@ -44,10 +40,10 @@ List(value:{space?: number | string, initialIndex?: number, scroller?: Scroller} | chainAnimation | boolean | false | 用于设置当前list是否启用链式联动动效，开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果：list内的list-item间隔一定距离，在基本的滑动交互行为下，主动对象驱动从动对象进行联动，驱动效果遵循弹簧物理动效。
- false：不启用链式联动。
- true：启用链式联动。 | | multiSelectable8+ | boolean | false | 是否开启鼠标框选。
- false：关闭框选。
- true：开启框选。 | | lanes9+ | number \|
{
minLength: Length,
maxLength: Length
} | 1 | 以列模式为例（listDirection为Axis.Vertical）:
lanes用于决定List组件在交叉轴方向按几列布局，规则如下：
- lanes为指定的数量时，根据指定的数量与List组件的交叉轴宽度来决定每列的宽度；
- lane设置了{minLength，maxLength}时，根据List组件的宽度自适应决定lanes数量（即列数），保证缩放过程中lane的宽度符合{minLength，maxLength}的限制。其中，minLength条件会被优先满足，即优先保证符合ListItem的宽度符合最小宽度限制。例如在列模式下，设置了{minLength: 40vp，maxLength: 60vp}，则当List组件宽度为70vp时，ListItem为一列，并且根据alignListItem属性做靠左、居中或者靠右布局；当List组件宽度变化至80vp时，符合两倍的minLength，则ListItem自适应为两列。 | -| alignListItem9+ | ListItemAlign | ListItemAlign.Center | List交叉轴方向宽度大于ListItem交叉轴宽度 * lanes时，ListItem在List交叉轴方向的布局方式，默认为居中。 | -| sticky9+ | StickyStyle | StickyStyle.None | 配合[ListItemGroup](ts-container-listitemgroup.md)组件使用，设置ListItemGroup中header和footer是否要吸顶或吸底，参见StickyStyle的枚举说明。| +| alignListItem9+ | [ListItemAlign](#ListItemAlign9+) | ListItemAlign.Center | List交叉轴方向宽度大于ListItem交叉轴宽度 * lanes时，ListItem在List交叉轴方向的布局方式，默认为居中。 | +| sticky9+ | [StickyStyle](#StickyStyle9+) | StickyStyle.None | 配合[ListItemGroup](ts-container-listitemgroup.md)组件使用，设置ListItemGroup中header和footer是否要吸顶或吸底，参见StickyStyle的枚举说明。| -- ListItemAlign9+枚举说明 +### ListItemAlign9+ | 名称 | 描述 | | ------ | -------------------------------------- | @@ -55,7 +51,7 @@ List(value:{space?: number | string, initialIndex?: number, scroller?: Scroller} | Center | ListItem在List中，交叉轴方向居中对齐。 | | End | ListItem在List中，交叉轴方向尾部对齐。 | -- StickyStyle9+枚举说明 +### StickyStyle9+ | 名称 | 描述 | | ------ | -------------------------------------- | @@ -65,24 +61,8 @@ List(value:{space?: number | string, initialIndex?: number, scroller?: Scroller} sticky属性可以设置为 StickyStyle.Header | StickyStyle.Footer 以同时支持header吸顶和footer吸底。 -## 事件 -| 名称 | 功能描述 | -| -------- | -------- | -| onItemDelete(event: (index: number) => boolean) | 列表项删除时触发。 | -| onScroll(event: (scrollOffset: number, scrollState: ScrollState) => void) | 列表滑动时触发，返回值scrollOffset为滑动偏移量，scrollState为当前滑动状态。 | -| onScrollIndex(event: (start: number, end: number) => void) | 列表滑动时触发，返回值分别为滑动起始位置索引值与滑动结束位置索引值。 | -| onReachStart(event: () => void) | 列表到达起始位置时触发。 | -| onReachEnd(event: () => void) | 列表到底末尾位置时触发。 | -| onScrollStop(event: () => void) | 列表滑动停止时触发。 | -| onItemMove(event: (from: number, to: number) => boolean) | 列表元素发生移动时触发，返回值from、to分别为移动前索引值与移动后索引值。 | -| onItemDragStart(event: (event: ItemDragInfo, itemIndex: number) => (() => any) \| void) | 开始拖拽列表元素时触发，返回值event见ItemDragInfo对象说明，itemIndex为被拖拽列表元素索引值。 | -| onItemDragEnter(event: (event: ItemDragInfo) => void) | 拖拽进入列表元素范围内时触发，返回值event见ItemDragInfo对象说明。 | -| onItemDragMove(event: (event: ItemDragInfo, itemIndex: number, insertIndex: number) => void) | 拖拽在列表元素范围内移动时触发，返回值event见ItemDragInfo对象说明，itemIndex为拖拽起始位置，insertIndex为拖拽插入位置。 | -| onItemDragLeave(event: (event: ItemDragInfo, itemIndex: number) => void) | 拖拽离开列表元素时触发，返回值event见ItemDragInfo对象说明，itemIndex为拖拽离开的列表元素索引值。 | -| onItemDrop(event: (event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => void) | 绑定该事件的列表元素可作为拖拽释放目标，当在列表元素内停止拖拽时触发，返回值event见ItemDragInfo对象说明，itemIndex为拖拽起始位置，insertIndex为拖拽插入位置，isSuccess为是否成功释放。 | - -## ScrollState枚举说明 +### ScrollState | 名称 | 描述 | | ------ | ------------------------- | @@ -92,18 +72,38 @@ List(value:{space?: number | string, initialIndex?: number, scroller?: Scroller} > **说明：** > List使能可编辑模式需配合onItemDelete事件和ListItem的editable属性，即可编辑模式实现删除列表项功能，需满足以下条件： -> +> > - editMode属性设置为true。 -> +> > - 绑定onItemDelete事件，且事件回调返回true。 -> +> > - ListItem的editable属性设置为true。 -> +> > 实现ListItem拖拽，需满足以下条件： -> +> > - editMode属性设置为true。 -> +> > - 绑定onDragStart事件，且事件回调中返回浮动UI布局。 +> + + +## 事件 + +| 名称 | 功能描述 | +| -------- | -------- | +| onItemDelete(event: (index: number) => boolean) | 列表项删除时触发。 | +| onScroll(event: (scrollOffset: number, scrollState: ScrollState) => void) | 列表滑动时触发，返回值scrollOffset为滑动偏移量，[scrollState](#ScrollState)为当前滑动状态。 | +| onScrollIndex(event: (start: number, end: number) => void) | 列表滑动时触发，返回值分别为滑动起始位置索引值与滑动结束位置索引值。 | +| onReachStart(event: () => void) | 列表到达起始位置时触发。 | +| onReachEnd(event: () => void) | 列表到底末尾位置时触发。 | +| onScrollStop(event: () => void) | 列表滑动停止时触发。 | +| onItemMove(event: (from: number, to: number) => boolean) | 列表元素发生移动时触发，返回值from、to分别为移动前索引值与移动后索引值。 | +| onItemDragStart(event: (event: ItemDragInfo, itemIndex: number) => (() => any) \| void) | 开始拖拽列表元素时触发，返回值event见[ItemDragInfo对象说明](ts-container-grid.md#ItemDragInfo对象说明)，itemIndex为被拖拽列表元素索引值。 | +| onItemDragEnter(event: (event: ItemDragInfo) => void) | 拖拽进入列表元素范围内时触发，返回值event见[ItemDragInfo对象说明](ts-container-grid.md#ItemDragInfo对象说明)。 | +| onItemDragMove(event: (event: ItemDragInfo, itemIndex: number, insertIndex: number) => void) | 拖拽在列表元素范围内移动时触发，返回值event见[ItemDragInfo对象说明](ts-container-grid.md#ItemDragInfo对象说明)，itemIndex为拖拽起始位置，insertIndex为拖拽插入位置。 | +| onItemDragLeave(event: (event: ItemDragInfo, itemIndex: number) => void) | 拖拽离开列表元素时触发，返回值event见[ItemDragInfo对象说明](ts-container-grid.md#ItemDragInfo对象说明)，itemIndex为拖拽离开的列表元素索引值。 | +| onItemDrop(event: (event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => void) | 绑定该事件的列表元素可作为拖拽释放目标，当在列表元素内停止拖拽时触发，返回值event见[ItemDragInfo对象说明](ts-container-grid.md#ItemDragInfo对象说明)，itemIndex为拖拽起始位置，insertIndex为拖拽插入位置，isSuccess为是否成功释放。 | + ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md index 51b4f079c1..f6c19e02ab 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md @@ -7,9 +7,6 @@ 用来展示列表具体item，宽度默认充满List组件，必须配合List来使用。 -## 权限列表 - -无 ## 子组件 @@ -26,19 +23,19 @@ ListItem() | 名称 | 参数类型 | 默认值 | 描述 | | -------- | -------- | -------- | -------- | -| sticky | Sticky | Sticky.None | 设置ListItem吸顶效果，参见Sticky枚举描述。 | -| editable | boolean \| EditMode | false | 当前ListItem元素是否可编辑，进入编辑模式后可删除或移动。 | +| sticky | [Sticky](#Sticky)| Sticky.None | 设置ListItem吸顶效果。 | +| editable | boolean \| [EditMode](#EditMode) | false | 当前ListItem元素是否可编辑，进入编辑模式后可删除或移动。 | | selectable8+ | boolean | true | 当前ListItem元素是否可以被鼠标框选。
>  **说明：**
> 外层List容器的鼠标框选开启时，ListItem的框选才生效。 | -| swipeAction9+ | {
start?: CustomBuilder,
end?:CustomBuilder,
edgeEffect?: SwipeEdgeEffect,
} | - | 用于设置ListItem的划出组件。
start: ListItem向右划动时item左边的组件（List垂直布局时）或ListItem向下划动时item上方的组件（List水平布局时）。
end: ListItem向左划动时item右边的组件（List垂直布局时）或ListItem向上划动时item下方的组件（List水平布局时）。
edgeEffect: 滑动效果，参见SwipeEdgeEffect的枚举说明。
| +| swipeAction9+ | {
start?: CustomBuilder,
end?:CustomBuilder,
edgeEffect?: [SwipeEdgeEffect](#SwipeEdgeEffect9+),
} | - | 用于设置ListItem的划出组件。
start: ListItem向右划动时item左边的组件（List垂直布局时）或ListItem向下划动时item上方的组件（List水平布局时）。
end: ListItem向左划动时item右边的组件（List垂直布局时）或ListItem向上划动时item下方的组件（List水平布局时）。
edgeEffect: 滑动效果。
| -## Sticky枚举说明 +## Sticky | 名称 | 描述 | | -------- | -------- | | None | 无吸顶效果。 | | Normal | 当前item吸顶。 | | Opacity | 当前item吸顶显示透明度变化效果。 | -## EditMode枚举说明 +## EditMode | 名称 | 描述 | | ------ | --------- | @@ -46,7 +43,7 @@ ListItem() | Deletable | 可删除。 | | Movable | 可移动。 | -## SwipeEdgeEffect9+枚举说明 +## SwipeEdgeEffect9+ | 名称 | 描述 | | -------- | -------- | | Spring | ListItem划动距离超过划出组件大小后可以继续划动，松手后按照弹簧阻尼曲线回弹。 | diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-listitemgroup.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-listitemgroup.md index 206f577e2d..5ceee35078 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-listitemgroup.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-listitemgroup.md @@ -6,10 +6,6 @@ > > 该组件从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 - -无 - ## 子组件 -- GitLab