diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219864159.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219864159.gif
new file mode 100644
index 0000000000000000000000000000000000000000..badadbdb856c478fdb2ec53f70015b29bb10041f
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219864159.gif differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138339.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138339.gif
deleted file mode 100644
index 557213e5ff5c63c5f3b3db7ffbd56e80eef688f1..0000000000000000000000000000000000000000
Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257138339.gif and /dev/null differ
diff --git a/en/application-dev/reference/arkui-ts/ts-container-listitem.md b/en/application-dev/reference/arkui-ts/ts-container-listitem.md
index ae044f9ddfddc305898c6c6bc65fb1dd90b845de..9de0b8a25a4bf88c91c0883561cc9ff61b63c086 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-listitem.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-listitem.md
@@ -22,20 +22,21 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Name| Type| Description|
| -------- | -------- | -------- |
-| sticky | [Sticky](#sticky)| Sticky effect of the list item.
Default value: **Sticky.None**|
-| editable | boolean \| [EditMode](#editmode)| Whether to enter editing mode, where the list item can be deleted or moved.
Default value: **false**|
+| sticky(deprecated) | [Sticky](#stickydeprecated) | Sticky effect of the list item.
Default value: **Sticky.None**
This API is deprecated since API version 9. You are advised to use **sticky** of the [\](ts-container-list.md#attributes) component. |
+| editable(deprecated) | boolean \| [EditMode](#editmodedeprecated) | Whether to enter editing mode, where the list item can be deleted or moved.
This API is deprecated since API version 9.
Default value: **false**|
| selectable8+ | boolean | Whether the current list item is selectable by mouse drag.
**NOTE**
This attribute takes effect only when mouse frame selection is enabled for the parent **\** container.
Default value: **true**|
| swipeAction9+ | {
start?: CustomBuilder,
end?:CustomBuilder,
edgeEffect?: [SwipeEdgeEffect](#swipeedgeeffect9),
} | Component displayed when the list item is swiped out from the screen edge.
- **start**: component on the left of the list item when the item is swiped to the right (in vertical list layout) or component above the list item when the item is swiped down (in horizontal list layout).
- **end**: component on the right of the list item when the item is swiped to the left (in vertical list layout) or component below the list item when the item is swiped up (in horizontal list layout).
- **edgeEffect**: scroll effect.
|
-## Sticky
+## Sticky(deprecated)
+This API is deprecated since API version 9. You are advised to use [stickyStyle](ts-container-list.md#stickystyle9) of the **\** component.
| Name| Description|
| -------- | -------- |
| None | The list item is not sticky.|
| Normal | The list item is sticky with no special effects.|
| Opacity | The list item is sticky with opacity changes.|
-## EditMode
-
+## EditMode(deprecated)
+This API is deprecated since API version 9.
| Name | Description |
| ------ | --------- |
| None | The editing operation is not restricted. |
@@ -63,41 +64,24 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
@Component
struct ListItemExample {
private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
- @State editFlag: boolean = false
build() {
Column() {
List({ space: 20, initialIndex: 0 }) {
- ListItem() {
- Text('sticky:Normal , click me edit list')
- .width('100%').height(40).fontSize(12).fontColor(0xFFFFFF)
- .textAlign(TextAlign.Center).backgroundColor(0x696969)
- .onClick(() => {
- this.editFlag = !this.editFlag
- })
- }.sticky(Sticky.Normal)
-
ForEach(this.arr, (item) => {
ListItem() {
Text('' + item)
.width('100%').height(100).fontSize(16)
.textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
- }.editable(this.editFlag)
+ }
}, item => item)
- }
- .editMode(true)
- .onItemDelete((index: number) => {
- console.info(this.arr[index - 1] + 'Delete')
- this.arr.splice(index - 1,1)
- this.editFlag = false
- return true
- }).width('90%')
+ }.width('90%')
}.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
}
}
```
-![en-us_image_0000001257138339](figures/en-us_image_0000001257138339.gif)
+![en-us_image_0000001219864159](figures/en-us_image_0000001219864159.gif)
```ts
// xxx.ets