Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
9386214c
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看板
体验新版 GitCode,发现更多精彩内容 >>
提交
9386214c
编写于
6月 25, 2022
作者:
T
tianyu
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
updata photo
Signed-off-by:
N
tianyu
<
tianyu55@h-partners.com
>
上级
141c0528
变更
5
显示空白变更内容
内联
并排
Showing
5 changed file
with
109 addition
and
36 deletion
+109
-36
zh-cn/application-dev/reference/arkui-js/figures/zh-cn-attributes.gif
...ation-dev/reference/arkui-js/figures/zh-cn-attributes.gif
+0
-0
zh-cn/application-dev/reference/arkui-js/js-components-common-attributes.md
...dev/reference/arkui-js/js-components-common-attributes.md
+68
-0
zh-cn/application-dev/reference/arkui-js/js-components-common-events.md
...ion-dev/reference/arkui-js/js-components-common-events.md
+23
-23
zh-cn/application-dev/reference/arkui-ts/ts-page-transition-animation.md
...on-dev/reference/arkui-ts/ts-page-transition-animation.md
+11
-11
zh-cn/application-dev/ui/ts-other-states-observed-objectlink.md
...application-dev/ui/ts-other-states-observed-objectlink.md
+7
-2
未找到文件。
zh-cn/application-dev/reference/arkui-js/figures/zh-cn-attributes.gif
0 → 100644
浏览文件 @
9386214c
64.4 KB
zh-cn/application-dev/reference/arkui-js/js-components-common-attributes.md
浏览文件 @
9386214c
...
...
@@ -32,3 +32,71 @@
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 属性和样式不能混用,不能在属性字段中进行样式设置。
## 示例
```
html
<!-- xxx.hml -->
<div
id=
"container"
>
<button
class=
"btn"
type=
"capsule"
value=
"toggleDisplay"
onclick=
"toggleDisplay"
></button>
<list
class=
"list"
>
<list-item
for=
"{{ array }}"
class=
"listItem"
>
<text
class=
"text"
onclick=
"toggleShow"
show=
"{{ visible }}"
if=
"{{ display }}"
>
{{ $item.value }}
</text>
</list-item>
</list>
</div>
```
```
css
/* xxx.css */
#container
{
flex-direction
:
column
;
width
:
100%
;
margin-top
:
10px
;
}
.text
{
font-size
:
50px
;
font-weight
:
500
;
margin-left
:
12px
;
}
.listItem
{
width
:
100%
;
height
:
100px
;
line-height
:
60px
;
border-bottom
:
1px
solid
#DEDEDE
;
font-size
:
20px
;
}
.btn
{
width
:
280px
;
font-size
:
26px
;
margin
:
10px
0
;
}
```
```
js
/* xxx.js */
export
default
{
data
:
{
visible
:
true
,
display
:
true
,
title
:
""
,
i
:
4
,
array
:
[
{
"
value
"
:
"
列表文本0
"
},
{
"
value
"
:
"
列表文本1
"
},
{
"
value
"
:
"
列表文本2
"
},
{
"
value
"
:
"
列表文本3
"
},
],
},
toggleShow
:
function
()
{
this
.
array
.
push
({
"
value
"
:
"
列表文本
"
+
this
.
i
})
this
.
i
++
},
toggleDisplay
:
function
()
{
this
.
display
=
!
this
.
display
},
}
```
![
zh-cn-attributes
](
figures/zh-cn-attributes.gif
)
\ No newline at end of file
zh-cn/application-dev/reference/arkui-js/js-components-common-events.md
浏览文件 @
9386214c
...
...
@@ -13,29 +13,29 @@
相对于私有事件,大部分组件都可以绑定如下事件。
| 名称
| 参数 | 描述 | 是否支持冒泡
|
| ------------------------ | ---------- | ----------------------------------------
|
-------------- |
| touchstart | TouchEvent | 手指刚触摸屏幕时触发该事件。
<br>
>
**说明:**
TouchEvent具体可参考表2 TouchEvent对象属性列表 | 是
<sup>
5+
</sup>
|
| touchmove | TouchEvent | 手指触摸屏幕后移动时触发该事件。 | 是
<sup>
5+
</sup>
|
| touchcancel | TouchEvent | 手指触摸屏幕中动作被打断时触发该事件。 | 是
<sup>
5+
</sup>
|
| touchend | TouchEvent | 手指触摸结束离开屏幕时触发该事件。 | 是
<sup>
5+
</sup>
|
| click | - | 点击动作触发该事件。
| 是
<sup>
6+
</sup>
|
| doubleclick
<sup>
7+
</sup>
| - | 双击动作触发该事件 | 否 |
| longpress | - | 长按动作触发该事件。 | 否 |
| swipe
<sup>
5+
</sup>
| SwipeEvent | 组件上快速滑动后触发该事件。
<br/>
>
**说明:**
SwipeEvent具体可参考表6 SwipeEvent 基础事件对象属性列表 | 否 |
| attached
<sup>
6+
</sup>
| - | 当前组件节点挂载在渲染树后触发。 | 否 |
| detached
<sup>
6+
</sup>
| - | 当前组件节点从渲染树中移除后触发。 | 否 |
| pinchstart
<sup>
7+
</sup>
| PinchEvent | 手指开始执行捏合操作时触发该事件。
<br/>
>
**说明:**
PinchEvent具体可参考表7 PinchEvent 对象属性列表 | 否 |
| pinchupdate
<sup>
7+
</sup>
| PinchEvent | 手指执行捏合操作过程中触发该事件。 | 否 |
| pinchend
<sup>
7+
</sup>
| PinchEvent | 手指捏合操作结束离开屏幕时触发该事件。 | 否 |
| pinchcancel
<sup>
7+
</sup>
| PinchEvent | 手指捏合操作被打断时触发该事件。 | 否 |
| dragstart
<sup>
7+
</sup>
| DragEvent | 用户开始拖拽时触发该事件。
<br/>
>
**说明:**
DragEvent具体可参考表8 DragEvent对象属性列表 | 否 |
| drag
<sup>
7+
</sup>
| DragEvent | 拖拽过程中触发该事件。 | 否 |
| dragend
<sup>
7+
</sup>
| DragEvent | 用户拖拽完成后触发。 | 否 |
| dragenter
<sup>
7+
</sup>
| DragEvent | 进入释放目标时触发该事件。 | 否 |
| dragover
<sup>
7+
</sup>
| DragEvent | 在释放目标内拖动时触发。 | 否 |
| dragleave
<sup>
7+
</sup>
| DragEvent | 离开释放目标区域时触发。 | 否 |
| drop
<sup>
7+
</sup>
| DragEvent | 在可释放目标区域内释放时触发。 | 否 |
| 名称
| 参数 | 描述 | 是否支持冒泡 | 是否支持捕获
|
| ------------------------ | ---------- | ----------------------------------------
-------------------- | --------------- | -
-------------- |
| touchstart | TouchEvent | 手指刚触摸屏幕时触发该事件。
<br>
>
**说明:**
TouchEvent具体可参考表2 TouchEvent对象属性列表 | 是
<sup>
5+
</sup>
|
是
<sup>
5+
</sup>
|
| touchmove | TouchEvent | 手指触摸屏幕后移动时触发该事件。
| 是
<sup>
5+
</sup>
| 是
<sup>
5+
</sup>
|
| touchcancel | TouchEvent | 手指触摸屏幕中动作被打断时触发该事件。
| 是
<sup>
5+
</sup>
| 是
<sup>
5+
</sup>
|
| touchend | TouchEvent | 手指触摸结束离开屏幕时触发该事件。
| 是
<sup>
5+
</sup>
| 是
<sup>
5+
</sup>
|
| click | - | 点击动作触发该事件。
| 是
<sup>
6+
</sup>
| 否
|
| doubleclick
<sup>
7+
</sup>
| - | 双击动作触发该事件
| 否
| 否 |
| longpress | - | 长按动作触发该事件。
| 否
| 否 |
| swipe
<sup>
5+
</sup>
| SwipeEvent | 组件上快速滑动后触发该事件。
<br/>
>
**说明:**
SwipeEvent具体可参考表6 SwipeEvent 基础事件对象属性列表 | 否 |
否 |
| attached
<sup>
6+
</sup>
| - | 当前组件节点挂载在渲染树后触发。
| 否
| 否 |
| detached
<sup>
6+
</sup>
| - | 当前组件节点从渲染树中移除后触发。
| 否
| 否 |
| pinchstart
<sup>
7+
</sup>
| PinchEvent | 手指开始执行捏合操作时触发该事件。
<br/>
>
**说明:**
PinchEvent具体可参考表7 PinchEvent 对象属性列表 | 否 |
否 |
| pinchupdate
<sup>
7+
</sup>
| PinchEvent | 手指执行捏合操作过程中触发该事件。
| 否
| 否 |
| pinchend
<sup>
7+
</sup>
| PinchEvent | 手指捏合操作结束离开屏幕时触发该事件。
| 否
| 否 |
| pinchcancel
<sup>
7+
</sup>
| PinchEvent | 手指捏合操作被打断时触发该事件。
| 否
| 否 |
| dragstart
<sup>
7+
</sup>
| DragEvent | 用户开始拖拽时触发该事件。
<br/>
>
**说明:**
DragEvent具体可参考表8 DragEvent对象属性列表 | 否 |
否 |
| drag
<sup>
7+
</sup>
| DragEvent | 拖拽过程中触发该事件。
| 否
| 否 |
| dragend
<sup>
7+
</sup>
| DragEvent | 用户拖拽完成后触发。
| 否
| 否 |
| dragenter
<sup>
7+
</sup>
| DragEvent | 进入释放目标时触发该事件。
| 否
| 否 |
| dragover
<sup>
7+
</sup>
| DragEvent | 在释放目标内拖动时触发。
| 否
| 否 |
| dragleave
<sup>
7+
</sup>
| DragEvent | 离开释放目标区域时触发。
| 否
| 否 |
| drop
<sup>
7+
</sup>
| DragEvent | 在可释放目标区域内释放时触发。
| 否
| 否 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
...
...
zh-cn/application-dev/reference/arkui-ts/ts-page-transition-animation.md
浏览文件 @
9386214c
...
...
@@ -25,8 +25,8 @@
-
RouteType枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Pop |
PageA跳转到PageB时,PageA为Exit+Push,PageB为Enter+Push。 |
| Push |
PageB返回至PageA时,PageA为Enter+Pop,PageB为Exit+Pop。 |
| Pop |
重定向指定页面 |
| Push |
跳转到下一页面。 |
## 属性
...
...
zh-cn/application-dev/ui/ts-other-states-observed-objectlink.md
浏览文件 @
9386214c
...
...
@@ -42,6 +42,7 @@
### 案例1
```
//父组件ViewB中的类对象ClassB,其包含的对象ClassA与子组件ViewA数据同步时,通过ObjectLink将数据c值的变化状态通知给父组件同步变化。
@Observed
class ClassA {
public name : string;
...
...
@@ -77,7 +78,7 @@ struct ViewA {
.width(100)
.margin(2)
.onClick(() => {
this.a = new ClassA(0); //
ERROR, this.a is immutable
this.a = new ClassA(0); //
错误:ObjectLink装饰的变量a是不可变的
})
}
}
...
...
@@ -119,6 +120,7 @@ struct ViewB {
### 案例2
```
//父组件ViewB中的类对象ClassA与子组件ViewA保持数据同步时,可以使用@ObjectLink和@Observed,绑定该数据对象的父组件和其他子组件同步更新
var nextID: number = 0;
@Observed
class ClassA {
...
...
@@ -142,7 +144,7 @@ struct ViewA {
.onClick(() => {
this.a.c += 1;
})
}
}
.margin({ top: 10 })
}
}
...
...
@@ -161,14 +163,17 @@ struct ViewB {
ViewA({label: `ViewA this.arrA[last]`, a: this.arrA[this.arrA.length-1]})
Button(`ViewB: reset array`)
.margin({ top: 10 })
.onClick(() => {
this.arrA = [ new ClassA(0), new ClassA(0) ];
})
Button(`ViewB: push`)
.margin({ top: 10 })
.onClick(() => {
this.arrA.push(new ClassA(0))
})
Button(`ViewB: shift`)
.margin({ top: 10 })
.onClick(() => {
this.arrA.shift()
})
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录