Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
506dc460
D
Docs
项目概览
OpenHarmony
/
Docs
1 年多 前同步成功
通知
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看板
提交
506dc460
编写于
12月 12, 2022
作者:
Y
yeyinglong
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
废弃List编辑模式
Signed-off-by:
N
yeyinglong
<
yeyinglong@live.com
>
上级
319beabd
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
30 addition
and
42 deletion
+30
-42
zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264378.gif
...ference/arkui-ts/figures/zh-cn_image_0000001174264378.gif
+0
-0
zh-cn/application-dev/reference/arkui-ts/ts-container-list.md
...n/application-dev/reference/arkui-ts/ts-container-list.md
+27
-39
zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md
...plication-dev/reference/arkui-ts/ts-container-listitem.md
+3
-3
未找到文件。
zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264378.gif
查看替换文件 @
319beabd
浏览文件 @
506dc460
316.1 KB
|
W:
|
H:
103.0 KB
|
W:
|
H:
2-up
Swipe
Onion skin
zh-cn/application-dev/reference/arkui-ts/ts-container-list.md
浏览文件 @
506dc460
...
@@ -35,7 +35,7 @@ List(value?:{space?: number | string, initialIndex?: number, scroller?
...
@@ -35,7 +35,7 @@ List(value?:{space?: number | string, initialIndex?: number, scroller?
| divider | {
<br/>
strokeWidth:
[Length](ts-types.md#length),
<br/>
color?:[ResourceColor](ts-types.md),
<br/>
startMargin?:
Length,
<br/>
endMargin?:
Length
<br/>
}
\|
null | 设置ListItem分割线样式,默认无分割线。
<br/>
- strokeWidth:
分割线的线宽。
<br/>
- color:
分割线的颜色。
<br/>
- startMargin:
分割线与列表侧边起始端的距离。
<br/>
- endMargin:
分割线与列表侧边结束端的距离。 |
| divider | {
<br/>
strokeWidth:
[Length](ts-types.md#length),
<br/>
color?:[ResourceColor](ts-types.md),
<br/>
startMargin?:
Length,
<br/>
endMargin?:
Length
<br/>
}
\|
null | 设置ListItem分割线样式,默认无分割线。
<br/>
- strokeWidth:
分割线的线宽。
<br/>
- color:
分割线的颜色。
<br/>
- startMargin:
分割线与列表侧边起始端的距离。
<br/>
- endMargin:
分割线与列表侧边结束端的距离。 |
| scrollBar |
[
BarState
](
ts-appendix-enums.md#barstate
)
| 设置滚动条状态。
<br/>
默认值:BarState.Off |
| scrollBar |
[
BarState
](
ts-appendix-enums.md#barstate
)
| 设置滚动条状态。
<br/>
默认值:BarState.Off |
| cachedCount | number | 设置列表中ListItem/ListItemGroup的预加载数量,其中ListItemGroup将作为一个整体进行计算,ListItemGroup中的所有ListItem会一次性全部加载出来。具体使用可参考
[
减少应用白块说明
](
../../ui/ui-ts-performance-improvement-recommendation.md#减少应用滑动白块
)
。
<br/>
默认值:1 |
| cachedCount | number | 设置列表中ListItem/ListItemGroup的预加载数量,其中ListItemGroup将作为一个整体进行计算,ListItemGroup中的所有ListItem会一次性全部加载出来。具体使用可参考
[
减少应用白块说明
](
../../ui/ui-ts-performance-improvement-recommendation.md#减少应用滑动白块
)
。
<br/>
默认值:1 |
| editMode
| boolean | 声明当前List组件是否处于可编辑模式
。
<br/>
默认值:false |
| editMode
<sup>
(deprecated)
</sup>
| boolean | 声明当前List组件是否处于可编辑模式。
<br/>
从API version9开始废弃
。
<br/>
默认值:false |
| edgeEffect |
[
EdgeEffect
](
ts-appendix-enums.md#edgeeffect
)
| 设置组件的滑动效果。
<br/>
默认值:EdgeEffect.Spring |
| edgeEffect |
[
EdgeEffect
](
ts-appendix-enums.md#edgeeffect
)
| 设置组件的滑动效果。
<br/>
默认值:EdgeEffect.Spring |
| chainAnimation | boolean | 设置当前List是否启用链式联动动效,开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果:List内的list-item间隔一定距离,在基本的滑动交互行为下,主动对象驱动从动对象进行联动,驱动效果遵循弹簧物理动效。
<br/>
默认值:false
<br/>
-
false:不启用链式联动。
<br/>
-
true:启用链式联动。 |
| chainAnimation | boolean | 设置当前List是否启用链式联动动效,开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果:List内的list-item间隔一定距离,在基本的滑动交互行为下,主动对象驱动从动对象进行联动,驱动效果遵循弹簧物理动效。
<br/>
默认值:false
<br/>
-
false:不启用链式联动。
<br/>
-
true:启用链式联动。 |
| multiSelectable
<sup>
8+
</sup>
| boolean | 是否开启鼠标框选。
<br/>
默认值:false
<br/>
-
false:关闭框选。
<br/>
-
true:开启框选。 |
| multiSelectable
<sup>
8+
</sup>
| boolean | 是否开启鼠标框选。
<br/>
默认值:false
<br/>
-
false:关闭框选。
<br/>
-
true:开启框选。 |
...
@@ -65,7 +65,7 @@ List(value?:{space?: number | string, initialIndex?: number, scroller?
...
@@ -65,7 +65,7 @@ List(value?:{space?: number | string, initialIndex?: number, scroller?
| 名称 | 功能描述 |
| 名称 | 功能描述 |
| -------- | -------- |
| -------- | -------- |
| onItemDelete
(event: (index: number) => boolean) | 当List组件在编辑模式时,点击ListItem右边出现的删除按钮时触发
。
<br/>
- index: 被删除的列表项的索引值。 |
| onItemDelete
<sup>
(deprecated)
</sup>
(event: (index: number) => boolean) | 当List组件在编辑模式时,点击ListItem右边出现的删除按钮时触发。
<br/>
从API version9开始废弃
。
<br/>
- index: 被删除的列表项的索引值。 |
| onScroll(event: (scrollOffset: number, scrollState: ScrollState) => void) | 列表滑动时触发。
<br/>
- scrollOffset: 滑动偏移量。
<br/>
-
[
scrollState
](
#scrollstate枚举说明
)
: 当前滑动状态。 |
| onScroll(event: (scrollOffset: number, scrollState: ScrollState) => void) | 列表滑动时触发。
<br/>
- scrollOffset: 滑动偏移量。
<br/>
-
[
scrollState
](
#scrollstate枚举说明
)
: 当前滑动状态。 |
| onScrollIndex(event: (start: number, end: number) => void) | 列表滑动时触发。
<br/>
计算索引值时,ListItemGroup作为一个整体占一个索引值,不计算ListItemGroup内部ListItem的索引值。
<br/>
- start: 滑动起始位置索引值。
<br/>
- end: 滑动结束位置索引值。 |
| onScrollIndex(event: (start: number, end: number) => void) | 列表滑动时触发。
<br/>
计算索引值时,ListItemGroup作为一个整体占一个索引值,不计算ListItemGroup内部ListItem的索引值。
<br/>
- start: 滑动起始位置索引值。
<br/>
- end: 滑动结束位置索引值。 |
| onReachStart(event: () => void) | 列表到达起始位置时触发。 |
| onReachStart(event: () => void) | 列表到达起始位置时触发。 |
...
@@ -89,7 +89,7 @@ List(value?:{space?: number | string, initialIndex?: number, scroller?
...
@@ -89,7 +89,7 @@ List(value?:{space?: number | string, initialIndex?: number, scroller?
> **说明:**
> **说明:**
>
>
> 要使List处于可编辑模式需配合onItemDelete事件和ListItem的editable属性,即可编辑模式实现删除列表项功能,需满足以下条件:
> 要使List处于可编辑模式需配合onItemDelete事件和ListItem的editable属性,即可编辑模式实现删除列表项功能,需满足以下条件
(该功能从API9开始废弃)
:
>
>
> - editMode属性设置为true。
> - editMode属性设置为true。
>
>
...
@@ -99,7 +99,7 @@ List(value?:{space?: number | string, initialIndex?: number, scroller?
...
@@ -99,7 +99,7 @@ List(value?:{space?: number | string, initialIndex?: number, scroller?
>
>
> 实现ListItem拖拽,需满足以下条件:
> 实现ListItem拖拽,需满足以下条件:
>
>
> - editMode属性设置为true。
> - editMode属性设置为true
(从API9开始无需设置editMode属性)
。
>
>
> - 绑定onDragStart事件,且事件回调中返回浮动UI布局。
> - 绑定onDragStart事件,且事件回调中返回浮动UI布局。
...
@@ -112,43 +112,31 @@ List(value?:{space?: number | string, initialIndex?: number, scroller?
...
@@ -112,43 +112,31 @@ List(value?:{space?: number | string, initialIndex?: number, scroller?
@
Component
@
Component
struct
ListExample
{
struct
ListExample
{
private
arr
:
number
[]
=
[
0
,
1
,
2
,
3
,
4
,
5
,
6
,
7
,
8
,
9
]
private
arr
:
number
[]
=
[
0
,
1
,
2
,
3
,
4
,
5
,
6
,
7
,
8
,
9
]
@
State
editFlag
:
boolean
=
false
build
()
{
build
()
{
Stack
({
alignContent
:
Alignment
.
TopStart
})
{
Column
()
{
Column
()
{
List
({
space
:
20
,
initialIndex
:
0
})
{
List
({
space
:
20
,
initialIndex
:
0
})
{
ForEach
(
this
.
arr
,
(
item
)
=>
{
ForEach
(
this
.
arr
,
(
item
)
=>
{
ListItem
()
{
ListItem
()
{
Text
(
''
+
item
)
Text
(
''
+
item
)
.
width
(
'
100%
'
).
height
(
100
).
fontSize
(
16
)
.
width
(
'
100%
'
).
height
(
100
).
fontSize
(
16
)
.
textAlign
(
TextAlign
.
Center
).
borderRadius
(
10
).
backgroundColor
(
0xFFFFFF
)
.
textAlign
(
TextAlign
.
Center
).
borderRadius
(
10
).
backgroundColor
(
0xFFFFFF
)
}
}.
editable
(
true
)
},
item
=>
item
)
},
item
=>
item
)
}
}
.
listDirection
(
Axis
.
Vertical
)
// 排列方向
.
listDirection
(
Axis
.
Vertical
)
// 排列方向
.
divider
({
strokeWidth
:
2
,
color
:
0xFFFFFF
,
startMargin
:
20
,
endMargin
:
20
})
// 每行之间的分界线
.
divider
({
strokeWidth
:
2
,
color
:
0xFFFFFF
,
startMargin
:
20
,
endMargin
:
20
})
// 每行之间的分界线
.
edgeEffect
(
EdgeEffect
.
Spring
)
// 滑动到边缘无效果
.
edgeEffect
(
EdgeEffect
.
None
)
// 滑动到边缘无效果
.
onScrollIndex
((
firstIndex
:
number
,
lastIndex
:
number
)
=>
{
.
chainAnimation
(
false
)
// 联动特效关闭
console
.
info
(
'
first
'
+
firstIndex
)
.
onScrollIndex
((
firstIndex
:
number
,
lastIndex
:
number
)
=>
{
console
.
info
(
'
last
'
+
lastIndex
)
console
.
info
(
'
first
'
+
firstIndex
)
})
console
.
info
(
'
last
'
+
lastIndex
)
.
width
(
'
90%
'
)
})
}
.
editMode
(
this
.
editFlag
)
.
width
(
'
100%
'
)
.
onItemDelete
((
index
:
number
)
=>
{
.
height
(
'
100%
'
)
console
.
info
(
this
.
arr
[
index
]
+
'
Delete
'
)
.
backgroundColor
(
0xDCDCDC
)
this
.
arr
.
splice
(
index
,
1
)
.
padding
({
top
:
5
})
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
})
}
}
}
}
```
```
...
...
zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md
浏览文件 @
506dc460
...
@@ -23,7 +23,7 @@ ListItem(value?: string)
...
@@ -23,7 +23,7 @@ ListItem(value?: string)
| 名称 | 参数类型 | 描述 |
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| -------- | -------- | -------- |
| sticky
<sup>
(deprecated)
</sup>
|
[
Sticky
](
#stickydeprecated枚举说明
)
| 设置ListItem吸顶效果。
<br/>
默认值:Sticky.None
<br/>
从API version9开始废弃,推荐使用
[
List组件sticky属性
](
ts-container-list.md#属性
)
。 |
| sticky
<sup>
(deprecated)
</sup>
|
[
Sticky
](
#stickydeprecated枚举说明
)
| 设置ListItem吸顶效果。
<br/>
默认值:Sticky.None
<br/>
从API version9开始废弃,推荐使用
[
List组件sticky属性
](
ts-container-list.md#属性
)
。 |
| editable
| boolean
\|
[
EditMode
](
#editmode枚举说明
)
| 当前ListItem元素是否可编辑,进入编辑模式后可删除或移动列表项
。
<br/>
默认值:false |
| 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 |
| 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/>
|
| 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/>
|
...
@@ -35,8 +35,8 @@ ListItem(value?: string)
...
@@ -35,8 +35,8 @@ ListItem(value?: string)
| Normal | 当前item吸顶。 |
| Normal | 当前item吸顶。 |
| Opacity | 当前item吸顶显示透明度变化效果。 |
| Opacity | 当前item吸顶显示透明度变化效果。 |
## EditMode枚举说明
## EditMode
<sup>(deprecated)</sup>
枚举说明
从API version9开始废弃。
| 名称 | 描述 |
| 名称 | 描述 |
| ------ | --------- |
| ------ | --------- |
| None | 编辑操作不限制。 |
| None | 编辑操作不限制。 |
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录