Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
837c6585
D
Docs
项目概览
OpenHarmony
/
Docs
11 个月 前同步成功
通知
159
Star
292
Fork
28
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
Docs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
837c6585
编写于
6月 05, 2023
作者:
O
openharmony_ci
提交者:
Gitee
6月 05, 2023
浏览文件
操作
浏览文件
下载
差异文件
!17954 ListItem长距离左滑删除文档
Merge pull request !17954 from limeng/RM001_ListItem
上级
a82b0813
75a68866
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
79 addition
and
1 deletion
+79
-1
zh-cn/application-dev/reference/arkui-ts/figures/deleteListItem.gif
...ication-dev/reference/arkui-ts/figures/deleteListItem.gif
+0
-0
zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md
...plication-dev/reference/arkui-ts/ts-container-listitem.md
+79
-1
未找到文件。
zh-cn/application-dev/reference/arkui-ts/figures/deleteListItem.gif
0 → 100644
浏览文件 @
837c6585
196.0 KB
zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md
浏览文件 @
837c6585
...
...
@@ -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
,
<br/>
end?:CustomBuilder
,
<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/>
**说明:**
<br/>
start和end对应的@builder函数中顶层必须是单个组件,不能是if/else、ForEach、LazyForEach语句。 |
| 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/>
**说明:**
<br/>
start和end对应的@builder函数中顶层必须是单个组件,不能是if/else、ForEach、LazyForEach语句。 |
## Sticky<sup>(deprecated)</sup>枚举说明
从API version9开始废弃,推荐使用
[
List组件stickyStyle枚举
](
ts-container-list.md#stickystyle9枚举说明
)
。
...
...
@@ -51,6 +51,18 @@ ListItem(value?: string)
| Spring | ListItem划动距离超过划出组件大小后可以继续划动,松手后按照弹簧阻尼曲线回弹。 |
| None | ListItem划动距离不能超过划出组件大小。 |
## SwipeActionItem<sup>10+</sup>对象说明
List垂直布局,ListItem向右滑动,item左边的长距离滑动删除选项或向左滑动时,item右边的长距离滑动删除选项。
</br>
List水平布局,ListItem向上滑动,item下边的长距离滑动删除选项或向下滑动时,item上边的长距离滑动删除选项。
| 名称 | 参数类型 | 必填 | 描述 |
| -------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
| deleteAreaDistance |
[
Length
](
ts-types.md#length
)
| 否 | 设置组件长距离滑动删除距离阈值。
<br/>
默认值:56vp
<br/>
**说明:**
<br/>
如果没有设置删除距离阈值,或删除距离阈值大于item宽度减去划出组件宽度,或删除距离阈值小于等于0就不会设置删除区域。|
| onDelete | () => void | 否 | 组件进入长距删除区后删除ListItem时调用,进入长距删除区后抬手时触发。 |
| onEntryDeleteArea | () => void | 否 | 在滑动条目进入删除区域时调用,只触发一次,当再次进入时仍触发。 |
| onExitDeleteArea | () => void | 否 |当滑动条目退出删除区域时调用,只触发一次,当再次退出时仍触发。 |
| builder | CustomBuilder | 否 |当列表项向右或向右滑动(当列表方向为“垂直”时),向下或向下滑动(当列方向为“水平”时)时显示的操作项。 |
| useDefaultDeleteAnimation | boolean | 否 |设置是否使用默认的删除动画。 |
## 事件
| 名称 | 功能描述 |
...
...
@@ -133,3 +145,69 @@ struct ListItemExample2 {
}
```
![
zh-cn_image_1501929990650
](
figures/zh-cn_image_1501929990650.jpg
)
```
ts
// xxx.ets
@
Entry
@
Component
struct
ListItemExample2
{
@
State
message
:
string
=
'
Hello World
'
@
State
arr
:
number
[]
=
[
0
,
1
,
2
,
3
,
4
]
@
State
enterEndDeleteAreaString
:
string
=
"
not enterEndDeleteArea
"
@
State
exitEndDeleteAreaString
:
string
=
"
not exitEndDeleteArea
"
@
Builder
itemEnd
()
{
Row
()
{
Button
(
"
Delete
"
).
margin
(
"
4vp
"
)
Button
(
"
Set
"
).
margin
(
"
4vp
"
)
}.
padding
(
"
4vp
"
).
justifyContent
(
FlexAlign
.
SpaceEvenly
)
}
build
()
{
Column
()
{
List
({
space
:
10
})
{
ForEach
(
this
.
arr
,
(
item
)
=>
{
ListItem
()
{
Text
(
"
item
"
+
item
)
.
width
(
'
100%
'
)
.
height
(
100
)
.
fontSize
(
16
)
.
textAlign
(
TextAlign
.
Center
)
.
borderRadius
(
10
)
.
backgroundColor
(
0xFFFFFF
)
}
.
transition
({
type
:
TransitionType
.
Delete
,
opacity
:
0
})
.
swipeAction
({
end
:
{
builder
:
this
.
itemEnd
.
bind
(
this
,
item
),
useDefaultDeleteAnimation
:
true
,
onDelete
:
()
=>
{
animateTo
({
duration
:
1000
},
()
=>
{
let
index
=
this
.
arr
.
indexOf
(
item
)
this
.
arr
.
splice
(
index
,
1
)
})
},
deleteAreaDistance
:
80
,
onEnterDeleteArea
:
()
=>
{
this
.
enterEndDeleteAreaString
=
"
enterEndDeleteArea
"
this
.
exitEndDeleteAreaString
=
"
not exitEndDeleteArea
"
},
onExitDeleteArea
:
()
=>
{
this
.
enterEndDeleteAreaString
=
"
not enterEndDeleteArea
"
this
.
exitEndDeleteAreaString
=
"
exitEndDeleteArea
"
}
}
})
},
item
=>
item
)
}
Text
(
this
.
enterEndDeleteAreaString
).
fontSize
(
20
)
Text
(
this
.
exitEndDeleteAreaString
).
fontSize
(
20
)
}
.
padding
(
10
)
.
backgroundColor
(
0xDCDCDC
)
.
width
(
'
100%
'
)
.
height
(
'
100%
'
)
}
}
```
![
deleteListItem
](
figures/deleteListItem.gif
)
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录