diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/list3.gif b/zh-cn/application-dev/reference/arkui-ts/figures/list3.gif
new file mode 100644
index 0000000000000000000000000000000000000000..fee786913eb846e96189bf852e199d9185c7dafa
Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/list3.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 03f978d50019cbefa43fa78128794346aece6db1..092482cb09acfd751f29da1010e840e53c28ce91 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
@@ -56,7 +56,7 @@ List(value?:{space?: number | string, initialIndex?: number, scroller?
| 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卡片中使用。。 |
| 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。 |
-| editMode(deprecated) | boolean | 声明当前List组件是否处于可编辑模式。
从API version9开始废弃。
默认值:false |
+| editMode(deprecated) | boolean | 声明当前List组件是否处于可编辑模式。
从API version9开始废弃。可参考[示例3](#示例3)实现删除选中的list项。
默认值:false |
| edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | 设置组件的滑动效果,支持弹簧效果和阴影效果。
默认值:EdgeEffect.Spring
从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| chainAnimation | boolean | 设置当前List是否启用链式联动动效,开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果:List内的list-item间隔一定距离,在基本的滑动交互行为下,主动对象驱动从动对象进行联动,驱动效果遵循弹簧物理动效。
默认值:false
- false:不启用链式联动。
- true:启用链式联动。
从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| multiSelectable8+ | boolean | 是否开启鼠标框选。
默认值:false
- false:关闭框选。
- true:开启框选。
从API version 9开始,该接口支持在ArkTS卡片中使用。 |
@@ -134,7 +134,7 @@ List(value?:{space?: number | string, initialIndex?: number, scroller?
> - 绑定onDragStart事件,且事件回调中返回浮动UI布局。
-## 示例
+## 示例1
```ts
// xxx.ets
@@ -173,6 +173,9 @@ struct ListExample {

+
+## 示例2
+
```ts
// xxx.ets
@Entry
@@ -199,7 +202,6 @@ struct ListLanesExample {
}
.height(300)
.width("90%")
- .editMode(true)
.border({ width: 3, color: Color.Red })
.lanes({ minLength: 40, maxLength: 40 })
.alignListItem(this.alignListItem)
@@ -219,3 +221,57 @@ struct ListLanesExample {
```

+
+
+## 示例3
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct ListExample{
+ @State 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, index) => {
+ ListItem() {
+ Flex({direction: FlexDirection.Row, alignItems: ItemAlign.Center}) {
+ Text('' + item)
+ .width('100%')
+ .height(80)
+ .fontSize(20)
+ .textAlign(TextAlign.Center)
+ .borderRadius(10)
+ .backgroundColor(0xFFFFFF)
+ .flexShrink(1)
+ if (this.editFlag) {
+ Button() {
+ Text("delete").fontSize(16)
+ }.width('30%').height(40)
+ .onClick(() => {
+ console.info(this.arr[index] + 'Delete')
+ this.arr.splice(index, 1)
+ console.info(JSON.stringify(this.arr))
+ this.editFlag = false
+ }).stateEffect(true)
+ }
+ }
+ }
+ }, item => item)
+ }.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 })
+ }
+}
+```
+
+
\ No newline at end of file