diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn-attributes.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn-attributes.gif
new file mode 100644
index 0000000000000000000000000000000000000000..528b70859a14ea9988a5eac95e40b203149e05ec
Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn-attributes.gif differ
diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-common-attributes.md b/zh-cn/application-dev/reference/arkui-js/js-components-common-attributes.md
index 53a8a0b57443ea39df3a2d5bc0a714c81c2d0d43..93a9f6b292ef5a5cd0baf2d1e6c0eae388a048c9 100644
--- a/zh-cn/application-dev/reference/arkui-js/js-components-common-attributes.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-components-common-attributes.md
@@ -32,3 +32,71 @@
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 属性和样式不能混用,不能在属性字段中进行样式设置。
+
+## 示例
+
+```html
+
+
+
+
+
+ {{ $item.value }}
+
+
+
+```
+
+```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
diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-common-events.md b/zh-cn/application-dev/reference/arkui-js/js-components-common-events.md
index d83a0cba9ca04fac1627ed87739b9fbe05c7e02e..e253da0b05893955c72f79c50b0d77e58cbb8b79 100644
--- a/zh-cn/application-dev/reference/arkui-js/js-components-common-events.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-components-common-events.md
@@ -13,29 +13,29 @@
相对于私有事件,大部分组件都可以绑定如下事件。
-| 名称 | 参数 | 描述 | 是否支持冒泡 |
-| ------------------------ | ---------- | ---------------------------------------- | -------------- |
-| touchstart | TouchEvent | 手指刚触摸屏幕时触发该事件。
> **说明:** TouchEvent具体可参考表2 TouchEvent对象属性列表 | 是5+ |
-| touchmove | TouchEvent | 手指触摸屏幕后移动时触发该事件。 | 是5+ |
-| touchcancel | TouchEvent | 手指触摸屏幕中动作被打断时触发该事件。 | 是5+ |
-| touchend | TouchEvent | 手指触摸结束离开屏幕时触发该事件。 | 是5+ |
-| click | - | 点击动作触发该事件。 | 是6+ |
-| doubleclick7+ | - | 双击动作触发该事件 | 否 |
-| longpress | - | 长按动作触发该事件。 | 否 |
-| swipe5+ | SwipeEvent | 组件上快速滑动后触发该事件。
> **说明:** SwipeEvent具体可参考表6 SwipeEvent 基础事件对象属性列表 | 否 |
-| attached6+ | - | 当前组件节点挂载在渲染树后触发。 | 否 |
-| detached6+ | - | 当前组件节点从渲染树中移除后触发。 | 否 |
-| pinchstart7+ | PinchEvent | 手指开始执行捏合操作时触发该事件。
> **说明:** PinchEvent具体可参考表7 PinchEvent 对象属性列表 | 否 |
-| pinchupdate7+ | PinchEvent | 手指执行捏合操作过程中触发该事件。 | 否 |
-| pinchend7+ | PinchEvent | 手指捏合操作结束离开屏幕时触发该事件。 | 否 |
-| pinchcancel7+ | PinchEvent | 手指捏合操作被打断时触发该事件。 | 否 |
-| dragstart7+ | DragEvent | 用户开始拖拽时触发该事件。
> **说明:** DragEvent具体可参考表8 DragEvent对象属性列表 | 否 |
-| drag7+ | DragEvent | 拖拽过程中触发该事件。 | 否 |
-| dragend7+ | DragEvent | 用户拖拽完成后触发。 | 否 |
-| dragenter7+ | DragEvent | 进入释放目标时触发该事件。 | 否 |
-| dragover7+ | DragEvent | 在释放目标内拖动时触发。 | 否 |
-| dragleave7+ | DragEvent | 离开释放目标区域时触发。 | 否 |
-| drop7+ | DragEvent | 在可释放目标区域内释放时触发。 | 否 |
+| 名称 | 参数 | 描述 | 是否支持冒泡 | 是否支持捕获 |
+| ------------------------ | ---------- | ------------------------------------------------------------ | --------------- | --------------- |
+| touchstart | TouchEvent | 手指刚触摸屏幕时触发该事件。
> **说明:** TouchEvent具体可参考表2 TouchEvent对象属性列表 | 是5+ | 是5+ |
+| touchmove | TouchEvent | 手指触摸屏幕后移动时触发该事件。 | 是5+ | 是5+ |
+| touchcancel | TouchEvent | 手指触摸屏幕中动作被打断时触发该事件。 | 是5+ | 是5+ |
+| touchend | TouchEvent | 手指触摸结束离开屏幕时触发该事件。 | 是5+ | 是5+ |
+| click | - | 点击动作触发该事件。 | 是6+ | 否 |
+| doubleclick7+ | - | 双击动作触发该事件 | 否 | 否 |
+| longpress | - | 长按动作触发该事件。 | 否 | 否 |
+| swipe5+ | SwipeEvent | 组件上快速滑动后触发该事件。
> **说明:** SwipeEvent具体可参考表6 SwipeEvent 基础事件对象属性列表 | 否 | 否 |
+| attached6+ | - | 当前组件节点挂载在渲染树后触发。 | 否 | 否 |
+| detached6+ | - | 当前组件节点从渲染树中移除后触发。 | 否 | 否 |
+| pinchstart7+ | PinchEvent | 手指开始执行捏合操作时触发该事件。
> **说明:** PinchEvent具体可参考表7 PinchEvent 对象属性列表 | 否 | 否 |
+| pinchupdate7+ | PinchEvent | 手指执行捏合操作过程中触发该事件。 | 否 | 否 |
+| pinchend7+ | PinchEvent | 手指捏合操作结束离开屏幕时触发该事件。 | 否 | 否 |
+| pinchcancel7+ | PinchEvent | 手指捏合操作被打断时触发该事件。 | 否 | 否 |
+| dragstart7+ | DragEvent | 用户开始拖拽时触发该事件。
> **说明:** DragEvent具体可参考表8 DragEvent对象属性列表 | 否 | 否 |
+| drag7+ | DragEvent | 拖拽过程中触发该事件。 | 否 | 否 |
+| dragend7+ | DragEvent | 用户拖拽完成后触发。 | 否 | 否 |
+| dragenter7+ | DragEvent | 进入释放目标时触发该事件。 | 否 | 否 |
+| dragover7+ | DragEvent | 在释放目标内拖动时触发。 | 否 | 否 |
+| dragleave7+ | DragEvent | 离开释放目标区域时触发。 | 否 | 否 |
+| drop7+ | DragEvent | 在可释放目标区域内释放时触发。 | 否 | 否 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-page-transition-animation.md b/zh-cn/application-dev/reference/arkui-ts/ts-page-transition-animation.md
index a93b489369d1c21e595cc27960b2ae6caf5da3d1..ed7edda27d585bb903fe59dbfc90ce12ed38ea95 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-page-transition-animation.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-page-transition-animation.md
@@ -23,10 +23,10 @@
- RouteType枚举说明
- | 名称 | 描述 |
+ | 名称 | 描述 |
| -------- | -------- |
- | Pop | PageA跳转到PageB时,PageA为Exit+Push,PageB为Enter+Push。 |
- | Push | PageB返回至PageA时,PageA为Enter+Pop,PageB为Exit+Pop。 |
+ | Pop | 重定向指定页面 |
+ | Push | 跳转到下一页面。 |
## 属性
@@ -41,22 +41,22 @@ PageTransitionEnter和PageTransitionExit组件支持的属性:
| opacity | number | 1 | 否 | 设置入场的起点透明度值或者退场的终点透明度值。 |
- SlideEffect枚举说明
- | 名称 | 描述 |
+ | 名称 | 描述 |
| -------- | -------- |
- | Left | 设置到入场时表示从左边滑入,出场时表示滑出到左边。 |
- | Right | 设置到入场时表示从右边滑入,出场时表示滑出到右边。 |
- | Top | 设置到入场时表示从上边滑入,出场时表示滑出到上边。 |
- | Bottom | 设置到入场时表示从下边滑入,出场时表示滑出到下边。 |
+ | Left | 设置到入场时表示从左边滑入,出场时表示滑出到左边。 |
+ | Right | 设置到入场时表示从右边滑入,出场时表示滑出到右边。 |
+ | Top | 设置到入场时表示从上边滑入,出场时表示滑出到上边。 |
+ | Bottom | 设置到入场时表示从下边滑入,出场时表示滑出到下边。 |
## 事件
PageTransitionEnter和PageTransitionExit组件支持的事件:
-| 事件 | 功能描述 |
+| 事件 | 功能描述 |
| -------- | -------- |
-| onEnter(type: RouteType, progress: number) => void | 回调入参为当前入场动画的归一化进度[0 - 1]。 |
-| onExit(type: RouteType, progress: number) => void | 回调入参为当前退场动画的归一化进度[0 - 1]。 |
+| onEnter(type: RouteType, progress: number) => void | 回调入参为当前入场动画的归一化进度[0 - 1]。 |
+| onExit(type: RouteType, progress: number) => void | 回调入参为当前退场动画的归一化进度[0 - 1]。 |
## 示例
diff --git a/zh-cn/application-dev/ui/ts-other-states-observed-objectlink.md b/zh-cn/application-dev/ui/ts-other-states-observed-objectlink.md
index 73f9e1e94a07bb851e3fada592e12d7dd299bb5b..bcec683234d5978a6e2beffa84aab4f3e8d522b8 100644
--- a/zh-cn/application-dev/ui/ts-other-states-observed-objectlink.md
+++ b/zh-cn/application-dev/ui/ts-other-states-observed-objectlink.md
@@ -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()
})