Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-uni-app-x-zh
提交
b6dac5a3
U
unidocs-uni-app-x-zh
项目概览
DCloud
/
unidocs-uni-app-x-zh
通知
144
Star
2
Fork
33
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
9
列表
看板
标记
里程碑
合并请求
11
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
unidocs-uni-app-x-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
9
Issue
9
列表
看板
标记
里程碑
合并请求
11
合并请求
11
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
b6dac5a3
编写于
1月 25, 2024
作者:
DCloud-yyl
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Update README.md
上级
94bc1cf8
变更
1
显示空白变更内容
内联
并排
Showing
1 changed file
with
15 addition
and
15 deletion
+15
-15
docs/dom/README.md
docs/dom/README.md
+15
-15
未找到文件。
docs/dom/README.md
浏览文件 @
b6dac5a3
...
@@ -27,14 +27,14 @@ DOM 是页面元素内容的结构数据。DOM 模型用一个逻辑树来表示
...
@@ -27,14 +27,14 @@ DOM 是页面元素内容的结构数据。DOM 模型用一个逻辑树来表示
2.
Draw API
2.
Draw API
Android和iOS的原生view,有一些底层的高性能绘制能力,这些API的调用,需要先获取到 Element 对象,然后再调用其方法。
Android和iOS的原生view,有一些底层的高性能绘制能力,这些API的调用,需要先获取到
Uni
Element 对象,然后再调用其方法。
在
[
性能
](
../performance.md
)
章节,对这2个场景有详细的阐述。
在
[
性能
](
../performance.md
)
章节,对这2个场景有详细的阐述。
## DOM元素对象@getDomNode
## DOM元素对象@getDomNode
在操作DOM元素对象前,需要先获取
`Element`
对象,可通过
`uni.getElementById`
或
`this.$refs`
获取。
在操作DOM元素对象前,需要先获取
`
Uni
Element`
对象,可通过
`uni.getElementById`
或
`this.$refs`
获取。
### 通过uni.getElementById获取DOM元素
### 通过uni.getElementById获取DOM元素
...
@@ -56,7 +56,7 @@ app-uvue 页面中可以为页面元素节点设置 id 属性,然后通过 [un
...
@@ -56,7 +56,7 @@ app-uvue 页面中可以为页面元素节点设置 id 属性,然后通过 [un
data
()
{
data
()
{
return
{
return
{
color
:
'
red
'
,
color
:
'
red
'
,
myView
:
null
as
Element
|
null
myView
:
null
as
Uni
Element
|
null
}
}
},
},
onReady
()
{
onReady
()
{
...
@@ -83,20 +83,20 @@ app-uvue页面中可以通过 vue 框架中的组件实例对象 [this.$refs](ht
...
@@ -83,20 +83,20 @@ app-uvue页面中可以通过 vue 框架中的组件实例对象 [this.$refs](ht
data
()
{
data
()
{
return
{
return
{
color
:
'
red
'
,
color
:
'
red
'
,
myView
:
null
as
Element
|
null
myView
:
null
as
Uni
Element
|
null
}
}
},
},
onReady
()
{
onReady
()
{
// 获取组件对象并保存在 this.myView 中
// 获取组件对象并保存在 this.myView 中
this
.
myView
=
this
.
$refs
[
'
myView
'
]
as
Element
;
//需要使用 as 转换
this
.
myView
=
this
.
$refs
[
'
myView
'
]
as
Uni
Element
;
//需要使用 as 转换
},
},
}
}
```
```
### 操作DOM元素对象
### 操作DOM元素对象
获取DOM元素对象Elment后,可通过其属性或方法操作组件,完整API参考
[
Element对象文档
](
element.md
)
获取DOM元素对象Elment后,可通过其属性或方法操作组件,完整API参考
[
UniElement对象文档
](
uni
element.md
)
如通过Element对象的 style 属性更新组件的样式:
如通过
Uni
Element对象的 style 属性更新组件的样式:
```
ts
```
ts
this
.
myView
?.
style
?.
setProperty
(
'
background-color
'
,
'
red
'
);
this
.
myView
?.
style
?.
setProperty
(
'
background-color
'
,
'
red
'
);
```
```
...
@@ -111,7 +111,7 @@ this.myView?.style?.setProperty('background-color', 'red');
...
@@ -111,7 +111,7 @@ this.myView?.style?.setProperty('background-color', 'red');
<view
id=
"myView"
ref=
"myView"
class=
"container"
>
<view
id=
"myView"
ref=
"myView"
class=
"container"
>
<text>
Hello World
</text>
<text>
Hello World
</text>
</view>
</view>
<button
@
tap=
"updateElement"
>
操作Element
</button>
<button
@
tap=
"updateElement"
>
操作
Uni
Element
</button>
<!-- #ifdef APP -->
<!-- #ifdef APP -->
</scroll-view>
</scroll-view>
<!-- #endif -->
<!-- #endif -->
...
@@ -122,14 +122,14 @@ this.myView?.style?.setProperty('background-color', 'red');
...
@@ -122,14 +122,14 @@ this.myView?.style?.setProperty('background-color', 'red');
data
()
{
data
()
{
return
{
return
{
color
:
'
red
'
,
color
:
'
red
'
,
myView
:
null
as
Element
|
null
myView
:
null
as
Uni
Element
|
null
}
}
},
},
onLoad
()
{
onLoad
()
{
},
},
onReady
()
{
onReady
()
{
this
.
myView
=
uni
.
getElementById
(
'
myView
'
);
//通过uni.getElementById获取
this
.
myView
=
uni
.
getElementById
(
'
myView
'
);
//通过uni.getElementById获取
//this.myView = this.$refs['myView'] as Element; //通过this.$refs获取,需要使用 as 转换
//this.myView = this.$refs['myView'] as
Uni
Element; //通过this.$refs获取,需要使用 as 转换
},
},
methods
:
{
methods
:
{
updateElement
()
{
updateElement
()
{
...
@@ -161,7 +161,7 @@ uni-app x 在 app 端提供 DrawableContext 绘制内容到 uvue 页面的`view`
...
@@ -161,7 +161,7 @@ uni-app x 在 app 端提供 DrawableContext 绘制内容到 uvue 页面的`view`
### 获取 DrawableContext 对象
### 获取 DrawableContext 对象
DrawableContext 可通过节点对象(Element)的
`getDrawableContext()`
方法获取
DrawableContext 可通过节点对象(
Uni
Element)的
`getDrawableContext()`
方法获取
```
vue
```
vue
<
template
>
<
template
>
...
@@ -171,7 +171,7 @@ DrawableContext 可通过节点对象(Element)的`getDrawableContext()`方
...
@@ -171,7 +171,7 @@ DrawableContext 可通过节点对象(Element)的`getDrawableContext()`方
<
script
>
<
script
>
export
default
{
export
default
{
onReady
()
{
onReady
()
{
var
ctx
=
(
this
.
$refs
[
'
drawable
'
]
as
Element
).
getDrawableContext
()
var
ctx
=
(
this
.
$refs
[
'
drawable
'
]
as
Uni
Element
).
getDrawableContext
()
}
}
}
}
</
script
>
</
script
>
...
@@ -185,7 +185,7 @@ DrawableContext 可通过节点对象(Element)的`getDrawableContext()`方
...
@@ -185,7 +185,7 @@ DrawableContext 可通过节点对象(Element)的`getDrawableContext()`方
<
script
>
<
script
>
export
default
{
export
default
{
onReady
()
{
onReady
()
{
var
ctx
=
(
this
.
$refs
[
'
drawable
'
]
as
Element
).
getDrawableContext
()
var
ctx
=
(
this
.
$refs
[
'
drawable
'
]
as
Uni
Element
).
getDrawableContext
()
ctx
.
moveTo
(
50
,
40
);
ctx
.
moveTo
(
50
,
40
);
ctx
.
lineTo
(
200
,
40
);
ctx
.
lineTo
(
200
,
40
);
ctx
.
stroke
();
ctx
.
stroke
();
...
@@ -202,7 +202,7 @@ DrawableContext 在调用 API 之后不会主动更新到画布上,需要主
...
@@ -202,7 +202,7 @@ DrawableContext 在调用 API 之后不会主动更新到画布上,需要主
<
script
>
<
script
>
export
default
{
export
default
{
onReady
()
{
onReady
()
{
var
ctx
=
(
this
.
$refs
[
'
drawable
'
]
as
Element
).
getDrawableContext
()
var
ctx
=
(
this
.
$refs
[
'
drawable
'
]
as
Uni
Element
).
getDrawableContext
()
ctx
.
moveTo
(
50
,
40
);
ctx
.
moveTo
(
50
,
40
);
ctx
.
lineTo
(
200
,
40
);
ctx
.
lineTo
(
200
,
40
);
ctx
.
stroke
();
ctx
.
stroke
();
...
@@ -233,7 +233,7 @@ DrawableContext 在调用 API 之后不会主动更新到画布上,需要主
...
@@ -233,7 +233,7 @@ DrawableContext 在调用 API 之后不会主动更新到画布上,需要主
},
},
methods
:{
methods
:{
drawable
(){
drawable
(){
var
ctx
=
(
this
.
$refs
[
'
drawable
'
]
as
Element
).
getDrawableContext
()
var
ctx
=
(
this
.
$refs
[
'
drawable
'
]
as
Uni
Element
).
getDrawableContext
()
ctx
.
reset
();
ctx
.
reset
();
if
(
this
.
change
)
{
if
(
this
.
change
)
{
ctx
.
strokeStyle
=
"
#33ff0000
"
ctx
.
strokeStyle
=
"
#33ff0000
"
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录