diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264378.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264378.gif
index cc49b51652e53b6caa3888b054dbea94c2f498eb..35b1bf68c0e0c323eb4c5171be6fbf368c6eb576 100644
Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264378.gif and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264378.gif differ
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 2dbd94b4cb78393b3a3d12faf28d34963fbad773..87d41d5049709480a7a935909a394c9858e2aac6 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
@@ -35,7 +35,7 @@ List(value?:{space?: number | string, initialIndex?: number, scroller?
| divider | {
strokeWidth: [Length](ts-types.md#length),
color?:[ResourceColor](ts-types.md),
startMargin?: Length,
endMargin?: Length
} \| null | 设置ListItem分割线样式，默认无分割线。
- strokeWidth: 分割线的线宽。
- color: 分割线的颜色。
- startMargin: 分割线与列表侧边起始端的距离。
- endMargin: 分割线与列表侧边结束端的距离。 |
| scrollBar | [BarState](ts-appendix-enums.md#barstate) | 设置滚动条状态。
默认值：BarState.Off |
| cachedCount | number | 设置列表中ListItem/ListItemGroup的预加载数量，其中ListItemGroup将作为一个整体进行计算，ListItemGroup中的所有ListItem会一次性全部加载出来。具体使用可参考[减少应用白块说明](../../ui/ui-ts-performance-improvement-recommendation.md#减少应用滑动白块)。
默认值：1 |
-| editMode | boolean | 声明当前List组件是否处于可编辑模式。
默认值：false |
+| editMode(deprecated) | boolean | 声明当前List组件是否处于可编辑模式。
从API version9开始废弃。
默认值：false |
| edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | 设置组件的滑动效果。
默认值：EdgeEffect.Spring |
| chainAnimation | boolean | 设置当前List是否启用链式联动动效，开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果：List内的list-item间隔一定距离，在基本的滑动交互行为下，主动对象驱动从动对象进行联动，驱动效果遵循弹簧物理动效。
默认值：false
- false：不启用链式联动。
- true：启用链式联动。 |
| multiSelectable8+ | boolean | 是否开启鼠标框选。
默认值：false
- false：关闭框选。
- true：开启框选。 |
@@ -65,7 +65,7 @@ List(value?:{space?: number | string, initialIndex?: number, scroller?
| 名称 | 功能描述 |
| -------- | -------- |
-| onItemDelete(event: (index: number) => boolean) | 当List组件在编辑模式时，点击ListItem右边出现的删除按钮时触发。
- index: 被删除的列表项的索引值。 |
+| onItemDelete(deprecated)(event: (index: number) => boolean) | 当List组件在编辑模式时，点击ListItem右边出现的删除按钮时触发。
从API version9开始废弃。
- index: 被删除的列表项的索引值。 |
| onScroll(event: (scrollOffset: number, scrollState: ScrollState) => void) | 列表滑动时触发。
- scrollOffset: 滑动偏移量。
- [scrollState](#scrollstate枚举说明): 当前滑动状态。 |
| onScrollIndex(event: (start: number, end: number) => void) | 列表滑动时触发。
计算索引值时，ListItemGroup作为一个整体占一个索引值，不计算ListItemGroup内部ListItem的索引值。
- start: 滑动起始位置索引值。
- end: 滑动结束位置索引值。 |
| onReachStart(event: () => void) | 列表到达起始位置时触发。 |
@@ -89,7 +89,7 @@ List(value?:{space?: number | string, initialIndex?: number, scroller?
> **说明：**
>
-> 要使List处于可编辑模式需配合onItemDelete事件和ListItem的editable属性，即可编辑模式实现删除列表项功能，需满足以下条件：
+> 要使List处于可编辑模式需配合onItemDelete事件和ListItem的editable属性，即可编辑模式实现删除列表项功能，需满足以下条件（该功能从API9开始废弃）：
>
> - editMode属性设置为true。
>
@@ -99,7 +99,7 @@ List(value?:{space?: number | string, initialIndex?: number, scroller?
>
> 实现ListItem拖拽，需满足以下条件：
>
-> - editMode属性设置为true。
+> - editMode属性设置为true（从API9开始无需设置editMode属性）。
>
> - 绑定onDragStart事件，且事件回调中返回浮动UI布局。
@@ -112,43 +112,31 @@ List(value?:{space?: number | string, initialIndex?: number, scroller?
@Component
struct ListExample {
private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
- @State editFlag: boolean = false
build() {
- Stack({ alignContent: Alignment.TopStart }) {
- Column() {
- List({ space: 20, initialIndex: 0 }) {
- ForEach(this.arr, (item) => {
- ListItem() {
- Text('' + item)
- .width('100%').height(100).fontSize(16)
- .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
- }.editable(true)
- }, item => item)
- }
- .listDirection(Axis.Vertical) // 排列方向
- .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线
- .edgeEffect(EdgeEffect.None) // 滑动到边缘无效果
- .chainAnimation(false) // 联动特效关闭
- .onScrollIndex((firstIndex: number, lastIndex: number) => {
- console.info('first' + firstIndex)
- console.info('last' + lastIndex)
- })
- .editMode(this.editFlag)
- .onItemDelete((index: number) => {
- console.info(this.arr[index] + 'Delete')
- this.arr.splice(index, 1)
- console.info(JSON.stringify(this.arr))
- this.editFlag = false
- return true
- }).width('90%')
- }.width('100%')
-
- Button('edit list')
- .onClick(() => {
- this.editFlag = !this.editFlag
- }).margin({ top: 5, left: 20 })
- }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
+ Column() {
+ List({ space: 20, initialIndex: 0 }) {
+ ForEach(this.arr, (item) => {
+ ListItem() {
+ Text('' + item)
+ .width('100%').height(100).fontSize(16)
+ .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
+ }
+ }, item => item)
+ }
+ .listDirection(Axis.Vertical) // 排列方向
+ .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线
+ .edgeEffect(EdgeEffect.Spring) // 滑动到边缘无效果
+ .onScrollIndex((firstIndex: number, lastIndex: number) => {
+ console.info('first' + firstIndex)
+ console.info('last' + lastIndex)
+ })
+ .width('90%')
+ }
+ .width('100%')
+ .height('100%')
+ .backgroundColor(0xDCDCDC)
+ .padding({ top: 5 })
}
}
```
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 0f36cfe25611d736164106ad72b19df528e1d555..0fd6256dbc68f335f45591a20d7d20f957eb8a58 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
@@ -23,7 +23,7 @@ ListItem(value?: string)
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| sticky(deprecated) | [Sticky](#stickydeprecated枚举说明) | 设置ListItem吸顶效果。
默认值：Sticky.None
从API version9开始废弃，推荐使用[List组件sticky属性](ts-container-list.md#属性)。 |
-| editable | boolean \| [EditMode](#editmode枚举说明) | 当前ListItem元素是否可编辑，进入编辑模式后可删除或移动列表项。
默认值：false |
+| editable(deprecated) | boolean \| [EditMode](#editmodedeprecated枚举说明) | 当前ListItem元素是否可编辑，进入编辑模式后可删除或移动列表项。
从API version9开始废弃。
默认值：false |
| selectable8+ | boolean | 当前ListItem元素是否可以被鼠标框选。
**说明：**
外层List容器的鼠标框选开启时，ListItem的框选才生效。
默认值：true |
| swipeAction9+ | {
start?: CustomBuilder,
end?:CustomBuilder,
edgeEffect?: [SwipeEdgeEffect](#swipeedgeeffect9枚举说明),
} | 用于设置ListItem的划出组件。
- start: ListItem向右划动时item左边的组件（List垂直布局时）或ListItem向下划动时item上方的组件（List水平布局时）。
- end: ListItem向左划动时item右边的组件（List垂直布局时）或ListItem向上划动时item下方的组件（List水平布局时）。
- edgeEffect: 滑动效果。
|
@@ -35,8 +35,8 @@ ListItem(value?: string)
| Normal | 当前item吸顶。 |
| Opacity | 当前item吸顶显示透明度变化效果。 |
-## EditMode枚举说明
-
+## EditMode(deprecated)枚举说明
+从API version9开始废弃。
| 名称 | 描述 |
| ------ | --------- |
| None | 编辑操作不限制。 |