未验证 提交 cc88cd02 编写于 作者: O openharmony_ci 提交者: Gitee

!11398 文档整改1111

Merge pull request !11398 from luoying_ace/ly1111
......@@ -125,8 +125,8 @@ interface DataChangeListener {
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------------- | --------------------- | ---- | ------------------------------------------------------------ |
| dataSource | IDataSource | 是 | 实现IDataSource接口的对象,需要开发者实现相关接口。 |
| itemGenerator | (item: any) => void | 是 | 生成子组件的lambda函数,为数组中的每一个数据项创建一个或多个子组件,单个子组件或子组件列表必须包括在大括号“{...}”中。 |
| keyGenerator | (item: any) => string | 否 | 匿名函数,用于给数组中的每一个数据项生成唯一且固定的键值。当数据项在数组中的位置更改时,其键值不得更改,当数组中的数据项被新项替换时,被替换项的键值和新项的键值必须不同。键值生成器的功能是可选的,但是,为了使开发框架能够更好地识别数组更改,提高性能,建议提供。如将数组反向时,如果没有提供键值生成器,则LazyForEach中的所有节点都将重建。 |
| itemGenerator | (item: any, index?: number) => void | 是 | 生成子组件的lambda函数,为数组中的每一个数据项创建一个或多个子组件,单个子组件或子组件列表必须包括在大括号“{...}”中。 |
| keyGenerator | (item: any, index?: number) => string | 否 | 匿名函数,用于给数组中的每一个数据项生成唯一且固定的键值。当数据项在数组中的位置更改时,其键值不得更改,当数组中的数据项被新项替换时,被替换项的键值和新项的键值必须不同。键值生成器的功能是可选的,但是,为了使开发框架能够更好地识别数组更改,提高性能,建议提供。如将数组反向时,如果没有提供键值生成器,则LazyForEach中的所有节点都将重建。 |
### IDataSource类型说明
......@@ -142,14 +142,14 @@ interface DataChangeListener {
| 名称 | 描述 |
| -------------------------------------------------------- | -------------------------------------- |
| onDataReloaded(): void | 重新加载所有数据。 |
| onDataAdded(index: number): void (deprecated) | 通知组件index的位置有数据添加。 |
| onDataMoved(from: number, to: number): void (deprecated) | 通知组件数据从from的位置移到to的位置。 |
| onDataDeleted(index: number): void (deprecated) | 通知组件index的位置有数据删除。 |
| onDataChanged(index: number): void (deprecated) | 通知组件index的位置有数据变化。 |
| onDataAdd(index: number): void 8+ | 通知组件index的位置有数据添加。 |
| onDataMove(from: number, to: number): void 8+ | 通知组件数据从from的位置移到to的位置。 |
| onDataDelete(index: number): void 8+ | 通知组件index的位置有数据删除。 |
| onDataChange(index: number): void 8+ | 通知组件index的位置有数据变化。 |
| onDataAdded(index: number): void<sup>deprecated</sup> | 通知组件index的位置有数据添加。从API Version 8开始废弃,建议使用onDataAdd。 |
| onDataMoved(from: number, to: number): void<sup>deprecated</sup> | 通知组件数据从from的位置移到to的位置。从API Version 8开始废弃,建议使用onDataMove。 |
| onDataDeleted(index: number): void<sup>deprecated</sup> | 通知组件index的位置有数据删除。从API Version 8开始废弃,建议使用onDataDelete。 |
| onDataChanged(index: number): void<sup>deprecated</sup> | 通知组件index的位置有数据变化。 从API Version 8开始废弃,建议使用onDataChange。 |
| onDataAdd(index: number): void<sup>8+</sup> | 通知组件index的位置有数据添加。 |
| onDataMove(from: number, to: number): void<sup>8+</sup> | 通知组件数据从from的位置移到to的位置。 |
| onDataDelete(index: number): void<sup>8+</sup> | 通知组件index的位置有数据删除。 |
| onDataChange(index: number): void<sup>8+</sup> | 通知组件index的位置有数据变化。 |
## 示例
......
......@@ -102,4 +102,5 @@
- [事件参数](js-components-custom-event-parameter.md)
- [slot插槽](js-components-custom-slot.md)
- [生命周期定义](js-components-custom-lifecycle.md)
- [动态创建组件](js-components-create-elements.md)
- [数据类型说明](js-appendix-types.md)
# 动态创建组件
提供在页面中动态添加组件,并为动态添加的组件设置属性与样式的能力。
> **说明:**
>
> - 从API version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## createElement
createElement(tag: string): Element
创建一个组件对象。
**参数:**
| 参数名 | 类型 | 必填 | 说明 |
| ------- | ------------ | ---- | ------- |
| tag | string | 是 | 组件名称。 |
**返回值:**
| 类型 | 说明 |
| ----------- | ------------- |
| Element | 对应tag名称的组件对象。 |
```js
let newImage = dom.createElement('image')
```
## setAttribute
setAttribute(name: string, value: string): void
动态设置组件的属性。
**参数:**
| 参数名 | 类型 | 必填 | 说明 |
| ------- | ------------ | ---- | ------- |
| name | string | 是 | 属性名称。 |
| value | string | 是 | 属性值。 |
```js
newImage.setAttribute('src', 'common/testImage.jpg')
```
## setStyle
setStyle(name: string, value: string): boolean
动态设置组件的样式。
**参数:**
| 参数名 | 类型 | 必填 | 说明 |
| ------- | ------------ | ---- | ------- |
| name | string | 是 | 样式名称。 |
| value | string | 是 | 样式值。 |
**返回值:**
| 类型 | 说明 |
| ----------- | ------------- |
| boolean | 设置成功时返回true,失败时返回false。 |
```js
newImage.setStyle('width', '120px')
```
## addChild
addChild(child: Element): void
将动态创建的组件添加到父组件当中。
**参数:**
| 参数名 | 类型 | 必填 | 说明 |
| ------- | ------------ | ---- | ------- |
| child | Element | 是 | 组件对象。 |
```js
newDiv.addChild(newImage)
```
## 示例
```html
<!-- xxx.hml -->
<div class="container">
<div id="parentDiv" class="parent"></div>
<button onclick="appendDiv" class="btn">动态创建div</button>
<button onclick="appendImage" class="btn">动态创建image到创建的div中</button>
</div>
```
```css
/* xxx.css */
.container {
flex-direction: column;
align-items: center;
width: 100%;
}
.parent {
flex-direction: column;
}
.btn {
width: 70%;
height: 60px;
margin: 15px;
}
```
```js
// xxx.js
let newDiv = null
let newImage = null
export default {
appendDiv() {
let parent = this.$element('parentDiv')
newDiv = dom.createElement('div')
newDiv.setStyle('width', '150px')
newDiv.setStyle('height', '150px')
newDiv.setStyle('backgroundColor', '#AEEEEE')
newDiv.setStyle('marginTop', '15px')
parent.addChild(newDiv)
},
appendImage() {
newImage = dom.createElement('image')
newImage.setAttribute('src', 'common/testImage.jpg')
newImage.setStyle('width', '120px')
newImage.setStyle('height', '120px')
newDiv.addChild(newImage)
}
}
```
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册