Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
提交 99e0a7ff 编写于 作者: T tianyu
浏览文件
操作

geshi cherryPick 3.1release 

Signed-off-by: Ntianyu <tianyu55@h-partners.com>
上级 d09b6139
展开全部 隐藏空白更改
内联 并排
Showing with 369 addition and 335 deletion
zh-cn/application-dev/reference/arkui-js/js-components-basic-span.md
浏览文件 @ 99e0a7ff
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
## 子组件 ## 子组件
支持子组件&lt;span&gt;。 无
## 属性 ## 属性
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-toggle.md
浏览文件 @ 99e0a7ff
...@@ -56,7 +56,7 @@ ...@@ -56,7 +56,7 @@
## 示例 ## 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div style="flex-direction: column;"> <div style="flex-direction: column;">
<text class="margin">1. Multiple choice example</text> <text class="margin">1. Multiple choice example</text>
...@@ -71,44 +71,61 @@ ...@@ -71,44 +71,61 @@
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.margin { .margin {
margin: 7px; margin: 7px;
} }
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
toggle_list: [ toggle_list: [
{ "id":"1001", "name":"Living room", "checked":true }, {
{ "id":"1002", "name":"Bedroom", "checked":false }, "id": "1001", "name": "Living room", "checked": true
{ "id":"1003", "name":"Second bedroom", "checked":false }, },
{ "id":"1004", "name":"Kitchen", "checked":false }, {
{ "id":"1005", "name":"Study", "checked":false }, "id": "1002", "name": "Bedroom", "checked": false
{ "id":"1006", "name":"Garden", "checked":false }, },
{ "id":"1007", "name":"Bathroom", "checked":false }, {
{ "id":"1008", "name":"Balcony", "checked":false }, "id": "1003", "name": "Second bedroom", "checked": false
], },
toggles: ["Living room","Bedroom","Kitchen","Study"], {
idx: "" "id": "1004", "name": "Kitchen", "checked": false
}, },
allclick(arg) { {
this.idx = arg "id": "1005", "name": "Study", "checked": false
}, },
allchange(e) { {
if (e.checked === true) { "id": "1006", "name": "Garden", "checked": false
for (var i = 0; i < this.toggle_list.length; i++) { },
if (this.toggle_list[i].id === this.idx) { {
this.toggle_list[i].checked = true "id": "1007", "name": "Bathroom", "checked": false
} else { },
this.toggle_list[i].checked = false {
"id": "1008", "name": "Balcony", "checked": false
},
],
toggles: ["Living room", "Bedroom", "Kitchen", "Study"],
idx: ""
},
allclick(arg) {
this.idx = arg;
},
allchange(e) {
if (e.checked != true) {
return;
}
for (var i = 0; i < this.toggle_list.length; i++) {
if (this.toggle_list[i].id === this.idx) {
this.toggle_list[i].checked = true;
} else {
this.toggle_list[i].checked = false;
}
} }
}
} }
}
} }
``` ```
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-toolbar-item.md
浏览文件 @ 99e0a7ff
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
工具栏子组件。作为工具栏组件的子组件，用于展示工具栏上的一个操作选项。 工具栏[toolbar](js-components-basic-toolbar.md)子组件。 用于展示工具栏上的一个操作选项。
## 子组件 ## 子组件
...@@ -57,15 +57,15 @@ ...@@ -57,15 +57,15 @@
## 示例 ## 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<toolbar style="position: fixed; bottom: 0px; "> <toolbar style="position : fixed; bottom : 0px;">
<toolbar-item icon='common/Icon/location.png' value='Option 1' > </toolbar-item> <toolbar-item icon='common/Icon/location.png' value='Option 1'></toolbar-item>
<toolbar-item icon='common/Icon/heart.png' value='Option 2'> </toolbar-item> <toolbar-item icon='common/Icon/heart.png' value='Option 2'></toolbar-item>
<toolbar-item icon='common/Icon/diamond.png' value='Option 3' > </toolbar-item> <toolbar-item icon='common/Icon/diamond.png' value='Option 3'></toolbar-item>
<toolbar-item icon='common/Icon/heart.png' value='Option 4' > </toolbar-item> <toolbar-item icon='common/Icon/heart.png' value='Option 4'></toolbar-item>
<toolbar-item icon='common/Icon/heart.png' value='Option 5' > </toolbar-item> <toolbar-item icon='common/Icon/heart.png' value='Option 5'></toolbar-item>
<toolbar-item icon='common/Icon/heart.png' value='Option 6'> </toolbar-item> <toolbar-item icon='common/Icon/heart.png' value='Option 6'></toolbar-item>
</toolbar> </toolbar>
``` ```
......
zh-cn/application-dev/reference/arkui-js/js-components-container-swiper.md
浏览文件 @ 99e0a7ff
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
## 子组件 ## 子组件
支持除&lt;list&gt;之外的子组件。 可以包含子组件。
## 属性 ## 属性
......
zh-cn/application-dev/reference/arkui-ts/ts-container-row.md
浏览文件 @ 99e0a7ff
...@@ -23,9 +23,9 @@ Row(value?:{space?: string&nbsp;|&nbsp;number}) ...@@ -23,9 +23,9 @@ Row(value?:{space?: string&nbsp;|&nbsp;number})
**参数：** **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | -------------------------- | ---- | ------ | ------------------ | | ------ | -------------------------- | ---- | ---------------------------------------- |
| space | string&nbsp;\|&nbsp;number | 否 | 0 | 横向布局元素间距。 | | space | string&nbsp;\|&nbsp;number | 否 | 横向布局元素间距。<br/>默认值：0，单位vp |
## 属性 ## 属性
......
zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md
浏览文件 @ 99e0a7ff
...@@ -9,9 +9,9 @@ ...@@ -9,9 +9,9 @@
## 属性 ## 属性
| 名称 | 参数 | 参数描述 | | 名称 | 参数 | 参数描述 |
| ---------------- | ---------------------------------------- | ---------------------------------------- | | ---------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| sharedTransition | id:&nbsp;string,<br/>{<br/>duration?: number,<br/>curve?: Curve&nbsp;\|&nbsp;string,<br/>delay?: number,<br/>motionPath?: <br/>{<br/>path: string,<br/>form?: number,<br/>to?: number,<br/>rotatable?: boolean<br/>},<br/>zIndex?: number,<br/>type?: [SharedTransitionEffectType](ts-appendix-enums.md#sharedtransitioneffecttype)<br/>} | 两个页面中id值相同且不为空字符串的组件即为共享元素，在页面转场时可显示共享元素转场动效。<br/>-&nbsp; id：设置组件的id。<br/>-&nbsp; duration：单位为毫秒，默认动画时长为1000毫秒。<br/>-&nbsp;curve：默认曲线为Linear，有效值参见[Curve](ts-appendix-enums.md#curve)&nbsp;说明。<br/>-&nbsp;delay：单位为毫秒，默认不延时播放。<br/>-&nbsp;motionPath：运动路径信息。<br/>-&nbsp;path：设置路径。<br/>-&nbsp;from：设置起始值。<br/>-&nbsp;to：设置终止值。<br/>-&nbsp;rotatable：是否旋转。<br/>-&nbsp;zIndex：设置Z轴。<br/>-&nbsp;type：动画类型。 | | sharedTransition | id:&nbsp;string,<br/>{<br/>&nbsp;duration?: number,<br/>&nbsp;curve?: Curve&nbsp;\|&nbsp;string,<br/>&nbsp;delay?: number,<br/>&nbsp;motionPath?: <br/>{<br/>&nbsp;path: string,<br/>&nbsp;form?: number,<br/>&nbsp;to?: number,<br/>&nbsp;rotatable?: boolean<br/>},<br/>zIndex?: number,<br/>type?: [SharedTransitionEffectType](ts-appendix-enums.md#sharedtransitioneffecttype)<br/>} | 两个页面中id值相同且不为空字符串的组件即为共享元素，在页面转场时可显示共享元素转场动效。<br/>-&nbsp;id：设置组件的id。<br/>-&nbsp;duration：单位为毫秒，默认动画时长为1000毫秒。<br/>-&nbsp;curve：默认曲线为Linear，有效值参见[Curve](ts-appendix-enums.md#curve)&nbsp;说明。<br/>-&nbsp;delay：单位为毫秒，默认不延时播放。<br/>-&nbsp;motionPath：运动路径信息。<br/>-&nbsp;path：设置路径。<br/>-&nbsp;from：设置起始值。<br/>-&nbsp;to：设置终止值。<br/>-&nbsp;rotatable：是否旋转。<br/>-&nbsp;zIndex：设置Z轴。<br/>-&nbsp;type：动画类型。 |
## 示例 ## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-events-click.md
浏览文件 @ 99e0a7ff
...@@ -12,15 +12,15 @@ ...@@ -12,15 +12,15 @@
| onClick(event:&nbsp;(event?:&nbsp;ClickEvent)&nbsp;=&gt;&nbsp;void) | 否 | 点击动作触发该方法调用，event参数见ClickEvent介绍。 | | onClick(event:&nbsp;(event?:&nbsp;ClickEvent)&nbsp;=&gt;&nbsp;void) | 否 | 点击动作触发该方法调用，event参数见ClickEvent介绍。 |
## ClickEvent对象说明 ## ClickEvent对象说明
| 属性名称 | 类型 | 描述 | | 属性名称 | 类型 | 描述 |
| ---------------------- | ------------------------------------ | ------------------------------------- | | ---------------------- | ------------------------------------ | -------------------------------------------------------- |
| screenX | number | 点击点相对于设备屏幕左边沿的X坐标。 | | screenX | number | 点击点相对于应用窗口左上角的X坐标。 |
| screenY | number | 点击点相对于设备屏幕上边沿的Y坐标。 | | screenY | number | 点击点相对于应用窗口左上角的Y坐标。 |
| x | number | 点击点相对于被点击元素左边沿的X坐标。 | | x | number | 点击点相对于被点击元素左边沿的X坐标。 |
| y | number | 点击点相对于被点击元素上边沿的Y坐标。 | | y | number | 点击点相对于被点击元素上边沿的Y坐标。 |
| target<sup>8+</sup> | [EventTarget](#eventtarget8对象说明) | 被点击元素对象。 | | target<sup>8+</sup> | [EventTarget](#eventtarget8对象说明) | 被点击元素对象。 |
| timestamp<sup>8+</sup> | number | 事件时间戳。 | | timestamp<sup>8+</sup> | number | 事件时间戳。触发事件时距离系统启动的时间间隔，单位纳秒。 |
| source<sup>8+</sup> | [SourceType](ts-gesture-settings.md) | 事件输入设备。 | | source<sup>8+</sup> | [SourceType](ts-gesture-settings.md) | 事件输入设备。 |
## EventTarget<sup>8+</sup>对象说明 ## EventTarget<sup>8+</sup>对象说明
| 名称 | 参数类型 | 描述 | | 名称 | 参数类型 | 描述 |
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-events-touch.md
浏览文件 @ 99e0a7ff
...@@ -14,27 +14,27 @@ ...@@ -14,27 +14,27 @@
## TouchEvent对象说明 ## TouchEvent对象说明
| 名称 | 类型 | 描述 | | 名称 | 类型 | 描述 |
| ------------------- | ---------------------------------------- | ------------ | | ------------------- | ---------------------------------------- | ------------ |
| type | [TouchType](ts-appendix-enums.md#touchtype) | 触摸事件的类型。 | | type | [TouchType](ts-appendix-enums.md#touchtype) | 触摸事件的类型。 |
| touches | Array&lt;[TouchObject](#touchobject对象说明)&gt; | 全部手指信息。 | | touches | Array&lt;[TouchObject](#touchobject对象说明)&gt; | 全部手指信息。 |
| changedTouches | Array&lt;[TouchObject](#touchobject对象说明)&gt; | 当前发生变化的手指信息。 | | changedTouches | Array&lt;[TouchObject](#touchobject对象说明)&gt; | 当前发生变化的手指信息。 |
| stopPropagation | () => void | 阻塞事件冒泡。 | | stopPropagation | () => void | 阻塞事件冒泡。 |
| timestamp<sup>8+</sup> | number | 事件时间戳。 | | timestamp<sup>8+</sup> | number | 事件时间戳。触发事件时距离系统启动的时间间隔，单位纳秒。 |
| target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md) | 触发手势事件的元素对象显示区域。 | | target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md) | 触发手势事件的元素对象显示区域。 |
| source<sup>8+</sup> | [SourceType](ts-gesture-settings.md) | 事件输入设备。 | | source<sup>8+</sup> | [SourceType](ts-gesture-settings.md) | 事件输入设备。 |
## TouchObject对象说明 ## TouchObject对象说明
| 名称 | 类型 | 描述 | | 名称 | 类型 | 描述 |
| ------- | --------------------------- | ------------------- | | ------- | ------------------------------------------- | ------------------------------------- |
| type | [TouchType](ts-appendix-enums.md#touchtype) | 触摸事件的类型。 | | type | [TouchType](ts-appendix-enums.md#touchtype) | 触摸事件的类型。 |
| id | number | 手指唯一标识符。 | | id | number | 手指唯一标识符。 |
| screenX | number | 触摸点相对于设备屏幕左边沿的X坐标。 | | screenX | number | 触摸点相对于应用窗口左上角的X坐标。 |
| screenY | number | 触摸点相对于设备屏幕上边沿的Y坐标。 | | screenY | number | 触摸点相对于应用窗口左上角的Y坐标。 |
| x | number | 触摸点相对于被触摸元素左边沿的X坐标。 | | x | number | 触摸点相对于被触摸元素左边沿的X坐标。 |
| y | number | 触摸点相对于被触摸元素上边沿的Y坐标。 | | y | number | 触摸点相对于被触摸元素上边沿的Y坐标。 |
## 示例 ## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-mouse-key.md
浏览文件 @ 99e0a7ff
...@@ -17,14 +17,14 @@ ...@@ -17,14 +17,14 @@
| 名称 | 属性类型 | 描述 | | 名称 | 属性类型 | 描述 |
| --------- | ------------------------------- | -------------------- | | --------- | ------------------------------- | -------------------- |
| screenX | number | 点击触点相对于屏幕左上角的x轴坐标。 | | screenX | number | 点击触点相对于应用窗口左上角的x轴坐标。 |
| screenY | number | 点击触点相对于屏幕左上角的y轴坐标。 | | screenY | number | 点击触点相对于应用窗口左上角的y轴坐标。 |
| x | number | 点击触点相对于当前组件左上角的x轴坐标。 | | x | number | 点击触点相对于当前组件左上角的x轴坐标。 |
| y | number | 点击触点相对于当前组件左上角的y轴坐标。 | | y | number | 点击触点相对于当前组件左上角的y轴坐标。 |
| button | [MouseButton](ts-appendix-enums.md#mousebutton) | 鼠标按键。 | | button | [MouseButton](ts-appendix-enums.md#mousebutton) | 鼠标按键。 |
| action | [MouseAction](ts-appendix-enums.md#mouseaction) | 事件动作。 | | action | [MouseAction](ts-appendix-enums.md#mouseaction) | 事件动作。 |
| stopPropagation | () => void | 阻塞事件冒泡。 | | stopPropagation | () => void | 阻塞事件冒泡。 |
| timestamp<sup>8+</sup> | number | 事件时间戳。 | | timestamp<sup>8+</sup> | number | 事件时间戳。触发事件时距离系统启动的时间间隔，单位纳秒。 |
| target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md) | 触发手势事件的元素对象显示区域。 | | target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md) | 触发手势事件的元素对象显示区域。 |
| source<sup>8+</sup> | [SourceType](ts-gesture-settings.md) | 事件输入设备。 | | source<sup>8+</sup> | [SourceType](ts-gesture-settings.md) | 事件输入设备。 |
......
zh-cn/application-dev/ui/arkui-overview.md
浏览文件 @ 99e0a7ff
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
## 主要特征 ## 主要特征
- UI组件：方舟开发框架不仅提供了多种基础组件，如文本显示、图片显示、按键交互等，也提供了支持视频播放能力的媒体组件。并且针对不同类型设备进行了组件设计，提供了组件在不同平台上的样式适配能力，此种组件称为“多态组件”。 - UI组件：方舟开发框架不仅提供了多种基础组件， 例如文本、图片、按钮等 ，也提供了支持视频播放能力的媒体组件。并且针对不同类型设备进行了组件设计，提供了组件在不同平台上的样式适配能力，此种组件称为“多态组件”。
- 布局：UI界面设计离不开布局的参与。方舟开发框架提供了多种布局方式，不仅保留了经典的弹性布局能力，也提供了列表、宫格、栅格布局和适应多分辨率场景开发的原子布局能力。 - 布局：UI界面设计离不开布局的参与。方舟开发框架提供了多种布局方式，不仅保留了经典的弹性布局能力，也提供了列表、宫格、栅格布局和适应多分辨率场景开发的原子布局能力。
......
zh-cn/application-dev/ui/js-framework-syntax-js.md
浏览文件 @ 99e0a7ff
...@@ -164,8 +164,8 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语 ...@@ -164,8 +164,8 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
images: [ images: [
{ src: '/common/frame1.png' }, { src: '/common/frame1.png' },
{ src: '/common/frame2.png' }, { src: '/common/frame2.png' },
{ src: '/common/frame3.png' }, { src: '/common/frame3.png' }
], ]
}, },
handleClick() { handleClick() {
const animator = this.$refs.animator; // 获取ref属性为animator的DOM元素 const animator = this.$refs.animator; // 获取ref属性为animator的DOM元素
...@@ -196,8 +196,8 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语 ...@@ -196,8 +196,8 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
images: [ images: [
{ src: '/common/frame1.png' }, { src: '/common/frame1.png' },
{ src: '/common/frame2.png' }, { src: '/common/frame2.png' },
{ src: '/common/frame3.png' }, { src: '/common/frame3.png' }
], ]
}, },
handleClick() { handleClick() {
const animator = this.$element('animator'); // 获取id属性为animator的DOM元素 const animator = this.$element('animator'); // 获取id属性为animator的DOM元素
......
zh-cn/application-dev/ui/ts-component-based-customdialog.md
浏览文件 @ 99e0a7ff
...@@ -47,3 +47,5 @@ struct CustomDialogUser { ...@@ -47,3 +47,5 @@ struct CustomDialogUser {
} }
} }
``` ```
![custom-dialog-demo](figures/custom-dialog-demo.gif)
\ No newline at end of file
zh-cn/application-dev/ui/ui-js-components-path2d.md
浏览文件 @ 99e0a7ff
...@@ -68,7 +68,7 @@ export default { ...@@ -68,7 +68,7 @@ export default {
path.moveTo(600, 535); path.moveTo(600, 535);
path.arc(520, 450, 85, 0, 6); path.arc(520, 450, 85, 0, 6);
ctx.stroke(path); ctx.stroke(path);
}, }
} }
``` ```
...@@ -131,51 +131,66 @@ text{ ...@@ -131,51 +131,66 @@ text{
``` ```
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
data:{ data: {
ctx: null, ctx: null,
path1: null, path1: null,
path2: null, path2: null,
path3: null, path3: null,
isAdd: "addPath2", isAdd: "addPath2",
isChange: true, isChange: true,
textName: 'change' textName: 'change'
}, },
onShow(){ onShow() {
this.ctx = this.$refs.canvas.getContext('2d',{antialias:true}); this.ctx = this.$refs.canvas.getContext('2d', {
this.path1 = this.ctx.createPath2D(); antialias: true
this.path1.moveTo(200, 200); });
this.path1.lineTo(400, 200); this.path1 = this.ctx.createPath2D();
this.path1.lineTo(400, 400); // 正方形
this.path1.lineTo(200, 400); this.path1.moveTo(200, 200);
this.path1.closePath(); this.path1.lineTo(400, 200);
this.path2 = this.ctx.createPath2D(); this.path1.lineTo(400, 400);
this.path2.arc(300, 300, 75, 0, 6.28) this.path1.lineTo(200, 400);
this.ctx.stroke(this.path1); this.path1.closePath();
}, this.path2 = this.ctx.createPath2D();
addPath(){ // 圆形
if(this.isAdd == "addPath2"){ this.path2.arc(300, 300, 75, 0, 6.28);
this.ctx.clearRect(0,0,600,600) this.ctx.stroke(this.path1);
this.ctx.beginPath(); },
this.path2.addPath(this.path1) addPath() {
this.ctx.stroke(this.path2); if (this.isAdd == "addPath2") {
this.isAdd = "clearPath2" // 删除指定指定区域的绘制内容
}else{ this.ctx.clearRect(0, 0, 600, 600);
this.ctx.clearRect(0,0,600,600) this.ctx.beginPath();
this.ctx.stroke(this.path1); this.isAdd = "addPath2" // 将另一个的路径添加到当前路径对象中
} this.path2.addPath(this.path1);
}, this.ctx.stroke(this.path2);
setTransform(){ this.isAdd = "clearPath2";
if(this.isChange){ } else {
this.ctx.clearRect(0,0,600,600) this.ctx.clearRect(0, 0, 600, 600);
this.path3 = this.ctx.createPath2D(); this.ctx.stroke(this.path1);
this.path3.arc(150, 150, 100, 0, 6.28) this.isAdd = "addPath2";
this.path3.setTransform(2, 0.1, 0.1, 2, 0,0); this.ctx.stroke(this.path3); this.isChange = !this.isChange; this.textName = "back" }
}else{ },
this.ctx.clearRect(0,0,600,600) setTransform() {
this.path3.setTransform(0.5, -0.1, -0.1, 0.5, 0,0);this.ctx.stroke(this.path3);this.isChange = !this.isChange; this.textName = "change" if (this.isChange) {
this.ctx.clearRect(0, 0, 600, 600);
this.path3 = this.ctx.createPath2D();
this.path3.arc(150, 150, 100, 0, 6.28);
// 重置现有的变换矩阵并创建新的变换矩阵
this.path3.setTransform(2, 0.1, 0.1, 2, 0, 0);
this.ctx.stroke(this.path3);
this.isChange = !this.isChange;
this.textName = "back"
} else {
this.ctx.clearRect(0, 0, 600, 600);
this.path3.setTransform(0.5, -0.1, -0.1, 0.5, 0, 0);
this.ctx.stroke(this.path3);
this.isChange = !this.isChange;
this.textName = "change";
}
} }
},
} }
``` ```
......
zh-cn/application-dev/ui/ui-ts-building-category-grid-layout.md
浏览文件 @ 99e0a7ff
...@@ -320,7 +320,7 @@ ...@@ -320,7 +320,7 @@
} }
``` ```
自定义组件提供了两个生命周期的回调接口aboutToAppear和aboutToDisappear。aboutToAppear的执行时机在创建自定义组件后，执行自定义组件build方法之前。aboutToDisappear在自定义组件的去初始化的时机执行。 ​ 自定义组件提供了两个生命周期的回调接口aboutToAppear和aboutToDisappear。aboutToAppear的执行时机在创建自定义组件后，执行自定义组件build方法之前。aboutToDisappear在自定义组件销毁之前的时机执行。
![zh-cn_image_0000001215113569](figures/zh-cn_image_0000001215113569.png) ![zh-cn_image_0000001215113569](figures/zh-cn_image_0000001215113569.png)
......
zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md
浏览文件 @ 99e0a7ff
...@@ -130,7 +130,7 @@ listener.on('change', onPortrait) ...@@ -130,7 +130,7 @@ listener.on('change', onPortrait)
} }
aboutToAppear() { aboutToAppear() {
portraitFunc = this.onPortrait.bind(this) //bind current js instance portraitFunc = this.onPortrait.bind(this) // 绑定当前应用实例
this.listener.on('change', portraitFunc) this.listener.on('change', portraitFunc)
} }
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或