提交 65bed4b4 编写于 作者: G gmy 提交者: 关明月
上级 ed7599d5
......@@ -75,6 +75,7 @@
display: flex;
justify-content: center;
align-items: center;
margin: 150px;
}
.rect{
width: 200px;
......@@ -90,7 +91,7 @@
}
/* 可以通过百分比指定动画运行的中间状态 */
50% {
background-color: \#f76160;
background-color: #f76160;
transform:translate(100px) rotate(60deg) scale(1.3);
}
to {
......
......@@ -24,7 +24,12 @@ HML(OpenHarmony Markup Language)是一套类HTML的标记语言,通过组
<text> {{content[1]}} </text>
</div>
```
```
/*xxx.css*/
.container{
margin: 200px;
}
```
```
// xxx.js
export default {
......@@ -42,6 +47,7 @@ export default {
>
> - hml文件中的js表达式不支持ES6语法。
![zh-cn_image_0000001118642003](figures/zh-cn_image_0000001118642003.png)
## 普通事件绑定
......@@ -120,6 +126,7 @@ export default {
}
```
![zh-cn_image_0000001118642002](figures/zh-cn_image_0000001118642002.gif)
## 冒泡事件绑定<sup>5+</sup>
......@@ -200,7 +207,7 @@ Touch触摸类事件支持捕获,捕获阶段位于冒泡阶段之前,捕获
```
<!-- xxx.hml -->
<div class="array-container">
<div class="array-container" style="flex-direction: column;margin: 200px;">
<!-- div列表渲染 -->
<!-- 默认$item代表数组中的元素, $idx代表数组中的元素索引 -->
<div for="{{array}}" tid="id" onclick="changeText">
......@@ -252,6 +259,7 @@ tid属性主要用来加速for循环的重渲染,旨在列表中的数据有
>
> - tid不支持表达式。
![zh-cn_image_0000001118642001](figures/zh-cn_image_0000001118642001.gif)
## 条件渲染
......@@ -297,6 +305,8 @@ export default {
}
```
![zh-cn_image_0000001118642004](figures/zh-cn_image_0000001118642004.gif)
优化渲染优化:show方法。当show为true时,节点正常渲染;当为false时,仅仅设置display样式为none。
```
......@@ -335,6 +345,8 @@ export default {
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 禁止在同一个元素上同时设置for和if属性。
![zh-cn_image_0000001118642005](figures/zh-cn_image_0000001118642005.gif)
## 逻辑控制块
&lt;block&gt;控制块使得循环渲染和条件渲染变得更加灵活;block在构建时不会被当作真实的节点编译。注意block标签只支持for和if属性。
......@@ -367,6 +379,8 @@ export default {
}
```
![zh-cn_image_0000001118642006](figures/zh-cn_image_0000001118642006.png)
## 模板引用
HML可以通过element引用模板文件,详细介绍可参考[自定义组件](../reference/arkui-js/js-components-custom-basic-usage.md)章节。
......
......@@ -184,7 +184,7 @@ JS文件用来定义HML页面的业务逻辑,支持ECMA规范的JavaScript语
2. 通过$element获取DOM元素
```
<!-- index.hml -->
<div class="container">
<div class="container" style="width:500px;height: 700px; margin: 100px;">
<image-animator class="image-player" id="animator" images="{{images}}" duration="1s" onclick="handleClick"></image-animator>
</div>
```
......@@ -213,6 +213,8 @@ JS文件用来定义HML页面的业务逻辑,支持ECMA规范的JavaScript语
};
```
![zh-cn_image_0000001118642007](figures/zh-cn_image_0000001118642007.gif)
## 获取ViewModel
根节点所在页面:
......@@ -237,6 +239,8 @@ export default {
}
```
![zh-cn_image_0000001118642008](figures/zh-cn_image_0000001118642008.png)
自定义parent组件:
```
......@@ -272,7 +276,7 @@ export default {
<!-- child.hml -->
<div class="item" onclick="textClicked">
<text class="text-style" onclick="childClicked">child component clicked</text>
<text class="text-style" if="{{show}}">hello child component</text>
<text class="text-style" if="{{isShow}}">hello child component</text>
</div>
```
......@@ -280,11 +284,11 @@ export default {
// child.js
export default {
data: {
show: false,
isShow: false,
text: 'I am child component!',
},
childClicked () {
this.show = !this.show;
this.isShow = !this.isShow;
console.info('child component get parent text');
console.info('${this.$parent().text}');
console.info('child component get root text');
......@@ -292,3 +296,5 @@ export default {
},
}
```
![zh-cn_image_0000001118642009](figures/zh-cn_image_0000001118642009.gif)
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册