Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-uni-app-x-zh
提交
cf0870e2
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看板
提交
cf0870e2
编写于
12月 28, 2023
作者:
W
wanganxp
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
提示uni不与调用页面绑定带来的问题
上级
465cce85
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
15 addition
and
3 deletion
+15
-3
docs/api/get-element.md
docs/api/get-element.md
+8
-2
docs/tutorial/idref.md
docs/tutorial/idref.md
+7
-1
未找到文件。
docs/api/get-element.md
浏览文件 @
cf0870e2
...
@@ -2,13 +2,19 @@
...
@@ -2,13 +2,19 @@
<!-- UTSAPIJSON.getElementById.description -->
<!-- UTSAPIJSON.getElementById.description -->
**注意:**
\
本方法获取的元素,是页面栈栈顶的页面的元素,而不是执行本方法代码所在的页面的元素。
\
因为uni是全局api,只有
`this.$refs`
才能和页面绑定。
\
如果A页面被栈顶的B页面盖住,在A页面执行
`uni.getElementById`
会访问到B页面的元素。
\
除非您确认清楚这个逻辑,否则不建议使用本方法。
\
与页面绑定的获取元素的方式是
`this.$refs`
获取的对象再进一步as为element。
[
详见
](
../tutorial/idref.md#ref方式
)
<!-- UTSAPIJSON.getElementById.param -->
<!-- UTSAPIJSON.getElementById.param -->
`3.93+`
支持泛型,可通过
`uni.getElementById<ElementType>(id)`
获取指定类型的元素。对于组件有自带方法的情况,通过泛型指定具体的元素类型,就可以调用该类型组件的专用方法,比如unicloud-db组件。
\
`3.93+`
支持泛型,可通过
`uni.getElementById<ElementType>(id)`
获取指定类型的元素。对于组件有自带方法的情况,通过泛型指定具体的元素类型,就可以调用该类型组件的专用方法,比如unicloud-db组件。
\
具体的组件元素类型,可查阅
`组件文档/组件类型`
获取。
具体的组件元素类型,可查阅
`组件文档/组件类型`
获取。
**注意:**
该方法只能获取当前页面的元素(查询时,会首先获取当前页面,即:
`getCurrentPages()`
获取的页面栈数组的最后一个页面),如果需要获取其他页面的元素,可通过
`ref`
获取指定页面的元素。
```
html
```
html
<template>
<template>
<view>
<view>
...
...
docs/tutorial/idref.md
浏览文件 @
cf0870e2
...
@@ -79,6 +79,8 @@ uni-app x提供了[uni.getElementById](../api/get-element.md)方法,返回的
...
@@ -79,6 +79,8 @@ uni-app x提供了[uni.getElementById](../api/get-element.md)方法,返回的
通用的元素操作方法,比如getAttribute、setStyle,在Element上就可以操作。
通用的元素操作方法,比如getAttribute、setStyle,在Element上就可以操作。
但是由于本方法不与页面绑定,获取的是栈顶页面的element,所以可能发生预期外的情况,
[
详见
](
../api/get-element.md
)
UniVideoElement 继承自 Element,拥有video专用的一批方法。
UniVideoElement 继承自 Element,拥有video专用的一批方法。
template区:
template区:
...
@@ -101,7 +103,11 @@ uni.createVideoContext("vid")!.play()
...
@@ -101,7 +103,11 @@ uni.createVideoContext("vid")!.play()
uni-app x 虽然支持
`uni.createSelectorQuery()`
API,传入选择器,可以拿到返回的NodesRef。但无法继续获取.context子对象。无法通过这种方式拿到context。
uni-app x 虽然支持
`uni.createSelectorQuery()`
API,传入选择器,可以拿到返回的NodesRef。但无法继续获取.context子对象。无法通过这种方式拿到context。
#### ref方式
#### ref方式
其实this.$refs获取到的内置组件,通过as也可以转换为Element。但一般ref用于vue自定义组件。
其实
`this.$refs`
获取到的内置组件,通过as也可以转换为Element。
与
`uni.getElementById`
相比,
`this.$refs`
方式与调用页面绑定,日常更推荐使用。
script区:
script区:
```
js
```
js
(
this
.
$refs
[
'
vid
'
]
as
UniVideoElement
).
play
();
//但一般ref用于vue自定义组件
(
this
.
$refs
[
'
vid
'
]
as
UniVideoElement
).
play
();
//但一般ref用于vue自定义组件
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录