From 04917eceb6db3019ccd03ab21c2e5562b4735945 Mon Sep 17 00:00:00 2001 From: limeng <limeng208@huawei.com> Date: Thu, 25 May 2023 06:22:36 +0000 Subject: [PATCH] update zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md. Signed-off-by: limeng <limeng208@huawei.com> --- .../arkui-ts/ts-container-listitem.md | 31 ++++++++++++------- 1 file changed, 19 insertions(+), 12 deletions(-) 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 dd59461cb7..e5fbf975ed 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 @@ -27,7 +27,7 @@ ListItem(value?: string) | sticky<sup>(deprecated)</sup> | [Sticky](#stickydeprecated枚举说明) | 设置ListItemå¸é¡¶æ•ˆæžœã€‚<br/>默认值:Sticky.None<br/>从API version9开始废弃,推è使用[List组件sticky属性](ts-container-list.md#属性)。 | | editable<sup>(deprecated)</sup> | boolean \| [EditMode](#editmodedeprecated枚举说明) | 当å‰ListItemå…ƒç´ æ˜¯å¦å¯ç¼–辑,进入编辑模å¼åŽå¯åˆ 除或移动列表项。<br/>从API version9开始废弃。<br/>默认值:false | | selectable<sup>8+</sup> | boolean | 当å‰ListItemå…ƒç´ æ˜¯å¦å¯ä»¥è¢«é¼ æ ‡æ¡†é€‰ã€‚<br/>**说明:**<br/>外层Listå®¹å™¨çš„é¼ æ ‡æ¡†é€‰å¼€å¯æ—¶ï¼ŒListItem的框选æ‰ç”Ÿæ•ˆã€‚<br/>默认值:true | -| swipeAction<sup>9+</sup> | {<br/>start?: CustomBuilder \| [SwipeActionItem](#SwipeActionItem10对象说明),<br/>end?:CustomBuilder \| [SwipeActionItem](#SwipeActionItem10对象说明),<br/>edgeEffect?: [SwipeEdgeEffect](#swipeedgeeffect9枚举说明),<br/>} | 用于设置ListItem的划出组件。<br/>- start: ListItemå‘å³åˆ’动时item左边的组件(List垂直布局时)或ListItemå‘下划动时item上方的组件(List水平布局时)。<br/>- end: ListItemå‘左划动时itemå³è¾¹çš„组件(List垂直布局时)或ListItemå‘上划动时item下方的组件(List水平布局时)。<br/>- edgeEffect: 滑动效果。<br/>- swipeActionItem: ListItemå‘å³æˆ–å‘左划动时item左边或å³è¾¹çš„组件长è·ç¦»æ»‘åŠ¨åˆ é™¤é€‰é¡¹ï¼ˆList垂直布局时)ListItemå‘下或å‘上划动时item上方或下方的组件长è·ç¦»æ»‘åŠ¨åˆ é™¤é€‰é¡¹ï¼ˆList水平布局时)。<br/>**说明:** <br/>startå’Œend对应的@builder函数ä¸é¡¶å±‚必须是å•ä¸ªç»„件,ä¸èƒ½æ˜¯if/elseã€ForEachã€LazyForEachè¯å¥ã€‚ | +| swipeAction<sup>9+</sup> | {<br/>start?: CustomBuilder \| SwipeActionItem,<br/>end?:CustomBuilder \| SwipeActionItem,<br/>edgeEffect?: [SwipeEdgeEffect](#swipeedgeeffect9枚举说明),<br/>} | 用于设置ListItem的划出组件。<br/>- start: ListItemå‘å³åˆ’动时item左边的组件(List垂直布局时)或ListItemå‘下划动时item上方的组件(List水平布局时)。<br/>- end: ListItemå‘左划动时itemå³è¾¹çš„组件(List垂直布局时)或ListItemå‘上划动时item下方的组件(List水平布局时)。<br/>- edgeEffect: 滑动效果。<br/>- swipeActionItem: ListItemå‘å³æˆ–å‘左划动时item左边或å³è¾¹çš„组件长è·ç¦»æ»‘åŠ¨åˆ é™¤é€‰é¡¹ï¼ˆList垂直布局时)ListItemå‘下或å‘上划动时item上方或下方的组件长è·ç¦»æ»‘åŠ¨åˆ é™¤é€‰é¡¹ï¼ˆList水平布局时)。<br/>**说明:** <br/>startå’Œend对应的@builder函数ä¸é¡¶å±‚必须是å•ä¸ªç»„件,ä¸èƒ½æ˜¯if/elseã€ForEachã€LazyForEachè¯å¥ã€‚ | ## Sticky<sup>(deprecated)</sup>枚举说明 从API version9开始废弃,推è使用[List组件stickyStyle枚举](ts-container-list.md#stickystyle9枚举说明)。 @@ -55,11 +55,11 @@ ListItem(value?: string) | å称 | å‚数类型 | å¿…å¡« | æè¿° | | -------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | -| deleteAreaDistance | [Length](ts-types.md#length) | å¦ | 设置组件长è·ç¦»æ»‘åŠ¨åˆ é™¤è·ç¦»é˜ˆå€¼ | +| deleteAreaDistance | [Length](ts-types.md#length) | å¦ | 设置组件长è·ç¦»æ»‘åŠ¨åˆ é™¤è·ç¦»é˜ˆå€¼ <br/>**说明:** <br/>å¦‚æžœæ²¡æœ‰è®¾ç½®åˆ é™¤è·ç¦»é˜ˆå€¼å°±ä¸ä¼šè§¦å‘åˆ é™¤ã€‚| | onDelete | () => **void** | å¦ | 组件进入长è·åˆ 除区åŽåˆ 除ListItem时调用。<br/>进入长è·åˆ 除区åŽï¼ŒæŠ¬æ‰‹æ—¶è§¦å‘;或者滑动速度大于åˆå§‹é€Ÿåº¦é˜ˆå€¼æ—¶è§¦å‘ | | onEntryDeleteArea | () => **void** | å¦ | 在滑动æ¡ç›®è¿›å…¥åˆ 除区域时调用,åªè§¦å‘一次,当å†æ¬¡è¿›å…¥æ—¶ä»è§¦å‘。 | | onExitDeleteArea | () => **void** | å¦ |当滑动æ¡ç›®é€€å‡ºåˆ 除区域时调用,åªè§¦å‘一次,当å†æ¬¡é€€å‡ºæ—¶ä»è§¦å‘。 | -| builder | CustomBuilder | å¦ |当列表项å‘左或å‘å³æ»‘动(当列表方å‘为“垂直â€æ—¶ï¼‰ï¼Œå‘上或å‘下滑动(当列方å‘为“水平â€æ—¶ï¼‰æ—¶æ˜¾ç¤ºçš„æ“作项。 | +| builder | CustomBuilder | å¦ |当列表项å‘å³æˆ–å‘å³æ»‘动(当列表方å‘为“垂直â€æ—¶ï¼‰ï¼Œå‘下或å‘下滑动(当列方å‘为“水平â€æ—¶ï¼‰æ—¶æ˜¾ç¤ºçš„æ“作项。 | | useDefaultDeleteAnimation | boolean | å¦ |设置是å¦ä½¿ç”¨é»˜è®¤çš„åˆ é™¤åŠ¨ç”»ã€‚ | ## 事件 @@ -153,13 +153,15 @@ struct ListItemExample3 { @State enterEndDeleteAreaString: string = "not enterEndDeleteArea" @State exitEndDeleteAreaString: string = "not exitEndDeleteArea" - @Builder itemEnd(index: number) { + @Builder itemEnd(value: number) { Row () { Button("Del").margin("4vp") .onClick( ()=> { - this.arr.splice(index, 1) - } - ) + animateTo({ duration: 1000 }, () => { + let index = this.arr.indexOf(value) + this.arr.splice(index, 1) + }) + }) Button("Set").margin("4vp") }.padding("4vp").justifyContent(FlexAlign.SpaceEvenly) } @@ -167,7 +169,7 @@ struct ListItemExample3 { build() { Column() { List({space:10}) { - ForEach(this.arr, (item, index) => { + ForEach(this.arr, (item) => { ListItem() { Text("item" + item) .width('100%') @@ -177,13 +179,17 @@ struct ListItemExample3 { .borderRadius(10) .backgroundColor(0xFFFFFF) } + .transition({ type: TransitionType.Delete, opacity: 0 }) .swipeAction({end:{ - builder:this.itemEnd.bind(this, index), + builder:this.itemEnd.bind(this, item), useDefaultDeleteAnimation:true, onDelete:()=>{ - this.arr.splice(index, 1) + animateTo({ duration: 1000 }, () => { + let index = this.arr.indexOf(item) + this.arr.splice(index, 1) + }) }, - deleteAreaDistance:150, + deleteAreaDistance:80, onEnterDeleteArea:()=>{ this.enterEndDeleteAreaString = "enterEndDeleteArea" this.exitEndDeleteAreaString = "not exitEndDeleteArea" @@ -205,4 +211,5 @@ struct ListItemExample3 { .height('100%') } } -``` + +``` \ No newline at end of file -- GitLab