Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
G8866
unidocs-zh
提交
359726ab
unidocs-zh
项目概览
G8866
/
unidocs-zh
与 Fork 源项目一致
Fork自
DCloud / unidocs-zh
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
359726ab
编写于
1月 16, 2024
作者:
辛宝Otto
🥊
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
style(api/ui): 调整 toc 展示,标注 createSelectorQuery.select 平台限制
上级
dab8af98
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
91 addition
and
75 deletion
+91
-75
docs/api/ui/nodes-info.md
docs/api/ui/nodes-info.md
+91
-75
未找到文件。
docs/api/ui/nodes-info.md
浏览文件 @
359726ab
#
#
uni.createSelectorQuery()
# uni.createSelectorQuery()
返回一个
`
`SelectorQuery``
对象实例。可以在这个实例上使用
``select``
等方法选择节点,并使用
``boundingClientRect``
等方法选择需要查询的信息。
返回一个
`
SelectorQuery`
对象实例。可以在这个实例上使用
`select`
等方法选择节点,并使用
`boundingClientRect`
等方法选择需要查询的信息。
**Tips:**
**Tips:**
*
使用
`uni.createSelectorQuery()`
需要在生命周期
`mounted`
后进行调用。
*
默认需要使用到
`selectorQuery.in`
方法。
-
使用
`uni.createSelectorQuery()`
需要在生命周期
`mounted`
后进行调用。
-
默认需要使用到
`selectorQuery.in`
方法。
## SelectorQuery
...
...
@@ -13,47 +13,51 @@
### selectorQuery.in(component)
将选择器的选取范围更改为自定义组件
`
`component``
内,返回一个
``SelectorQuery`
`
对象实例。(初始时,选择器仅选取页面范围的节点,不会选取任何自定义组件中的节点)。
将选择器的选取范围更改为自定义组件
`
component`
内,返回一个
`SelectorQuery
`
对象实例。(初始时,选择器仅选取页面范围的节点,不会选取任何自定义组件中的节点)。
**代码示例**
```
javascript
const
query
=
uni
.
createSelectorQuery
().
in
(
this
);
query
.
select
(
'
#id
'
).
boundingClientRect
(
data
=>
{
console
.
log
(
"
得到布局位置信息
"
+
JSON
.
stringify
(
data
));
console
.
log
(
"
节点离页面顶部的距离为
"
+
data
.
top
);
}).
exec
();
query
.
select
(
"
#id
"
)
.
boundingClientRect
((
data
)
=>
{
console
.
log
(
"
得到布局位置信息
"
+
JSON
.
stringify
(
data
));
console
.
log
(
"
节点离页面顶部的距离为
"
+
data
.
top
);
})
.
exec
();
```
**注意**
-
支付宝小程序不支持in(component),使用无效果
-
支付宝小程序不支持
in(component),使用无效果
### selectorQuery.select(selector)
在当前页面下选择第一个匹配选择器
`
`selector``
的节点,返回一个
``NodesRef`
`
对象实例,可以用于获取节点信息。
在当前页面下选择第一个匹配选择器
`
selector`
的节点,返回一个
`NodesRef
`
对象实例,可以用于获取节点信息。
**selector 说明:**
``selector``
类似于 CSS 的选择器,但仅支持下列语法。
-
ID选择器:
``#the-id``
-
class选择器(可以连续指定多个):
``.a-class.another-class``
-
子元素选择器:
``.the-parent > .the-child``
-
后代选择器:
``.the-ancestor .the-descendant``
-
跨自定义组件的后代选择器:
``.the-ancestor >>> .the-descendant``
-
多选择器的并集:
``#a-node, .some-other-nodes``
`selector`
类似于 CSS 的选择器,但仅支持下列语法。
-
ID 选择器:
`#the-id`
-
class 选择器(可以连续指定多个):
`.a-class.another-class`
-
子元素选择器:
`.the-parent > .the-child`
-
后代选择器:
`.the-ancestor .the-descendant`
-
跨自定义组件的后代选择器:
`.the-ancestor >>> .the-descendant`
(H5 暂不支持)
-
多选择器的并集:
`#a-node, .some-other-nodes`
### selectorQuery.selectAll(selector)
在当前页面下选择匹配选择器
`
`selector``
的所有节点,返回一个
``NodesRef`
`
对象实例,可以用于获取节点信息。
在当前页面下选择匹配选择器
`
selector`
的所有节点,返回一个
`NodesRef
`
对象实例,可以用于获取节点信息。
### selectorQuery.selectViewport()
选择显示区域,可用于获取显示区域的尺寸、滚动位置等信息,返回一个
``NodesRef``
对象实例。
选择显示区域,可用于获取显示区域的尺寸、滚动位置等信息,返回一个
`NodesRef`
对象实例。
### selectorQuery.exec(callback)
执行所有的请求。请求结果按请求次序构成数组,在
callback
的第一个参数中返回。
执行所有的请求。请求结果按请求次序构成数组,在
callback
的第一个参数中返回。
## NodesRef
...
...
@@ -78,33 +82,33 @@ query.select('#id').boundingClientRect(data => {
### nodesRef.boundingClientRect(callback)
添加节点的布局位置的查询请求。相对于显示区域,以像素为单位。其功能类似于 DOM 的
`
`getBoundingClientRect``
。返回
``NodesRef``
对应的
``SelectorQuery`
`
。
添加节点的布局位置的查询请求。相对于显示区域,以像素为单位。其功能类似于 DOM 的
`
getBoundingClientRect`
。返回
`NodesRef`
对应的
`SelectorQuery
`
。
**callback 返回参数**
|
属性 |类型 |说明
|
|
---|---|---
|
|
id |String |节点的 ID|
|
dataset |Object |节点的 dataset|
|
left |Number |节点的左边界坐标|
|
right |Number |节点的右边界坐标|
|
top |Number |节点的上边界坐标|
|
bottom |Number |节点的下边界坐标|
|
width |Number |节点的宽度|
|
height |Number |节点的高度
|
|
属性 | 类型 | 说明
|
|
------- | ------ | ----------------
|
|
id | String | 节点的 ID |
|
dataset | Object | 节点的 dataset |
|
left | Number | 节点的左边界坐标 |
|
right | Number | 节点的右边界坐标 |
|
top | Number | 节点的上边界坐标 |
|
bottom | Number | 节点的下边界坐标 |
|
width | Number | 节点的宽度 |
|
height | Number | 节点的高度
|
### nodesRef.scrollOffset(callback)
添加节点的滚动位置查询请求。以像素为单位。节点必须是
`
`scroll-view``
或者
``viewport``
。返回
``NodesRef``
对应的
``SelectorQuery`
`
。
添加节点的滚动位置查询请求。以像素为单位。节点必须是
`
scroll-view`
或者
`viewport`
。返回
`NodesRef`
对应的
`SelectorQuery
`
。
**callback 返回参数**
|
属性 |类型 |说明
|
|
---|---|---
|
|
id |String |节点的 ID|
|
dataset |Object |节点的 dataset|
|
scrollLeft |Number |节点的水平滚动位置|
|
scrollTop |Number |节点的竖直滚动位置
|
|
属性 | 类型 | 说明
|
|
---------- | ------ | ------------------
|
|
id | String | 节点的 ID |
|
dataset | Object | 节点的 dataset |
|
scrollLeft | Number | 节点的水平滚动位置 |
|
scrollTop | Number | 节点的竖直滚动位置
|
### nodesRef.context(callback)
...
...
@@ -118,8 +122,8 @@ query.select('#id').boundingClientRect(data => {
**callback 返回参数**
| 属性
| 类型 | 说明
|
| ---
| --- |
--- |
| 属性
| 类型 | 说明
|
| ---
---- | ------ | --------------------
--- |
| context | Object | 节点对应的 Context 对象 |
### nodesRef.node(callback)
...
...
@@ -134,8 +138,8 @@ query.select('#id').boundingClientRect(data => {
**callback 返回参数**
| 属性 | 类型
| 说明
|
| ---
| --- |
--- |
| 属性 | 类型
| 说明
|
| ---
- | ------ | -----------------
--- |
| node | Object | 节点对应的 Node 实例 |
**注意**
...
...
@@ -146,27 +150,39 @@ query.select('#id').boundingClientRect(data => {
### 代码示例
```
javascript
uni
.
createSelectorQuery
().
selectViewport
().
scrollOffset
(
res
=>
{
console
.
log
(
"
竖直滚动位置
"
+
res
.
scrollTop
);
}).
exec
();
uni
.
createSelectorQuery
()
.
selectViewport
()
.
scrollOffset
((
res
)
=>
{
console
.
log
(
"
竖直滚动位置
"
+
res
.
scrollTop
);
})
.
exec
();
let
view
=
uni
.
createSelectorQuery
().
in
(
this
).
select
(
"
.test
"
);
view
.
fields
({
size
:
true
,
scrollOffset
:
true
},
data
=>
{
console
.
log
(
"
得到节点信息
"
+
JSON
.
stringify
(
data
));
console
.
log
(
"
节点的宽为
"
+
data
.
width
);
}).
exec
();
view
.
boundingClientRect
(
data
=>
{
console
.
log
(
"
得到布局位置信息
"
+
JSON
.
stringify
(
data
));
console
.
log
(
"
节点离页面顶部的距离为
"
+
data
.
top
);
}).
exec
();
view
.
fields
(
{
size
:
true
,
scrollOffset
:
true
,
},
(
data
)
=>
{
console
.
log
(
"
得到节点信息
"
+
JSON
.
stringify
(
data
));
console
.
log
(
"
节点的宽为
"
+
data
.
width
);
}
)
.
exec
();
view
.
boundingClientRect
((
data
)
=>
{
console
.
log
(
"
得到布局位置信息
"
+
JSON
.
stringify
(
data
));
console
.
log
(
"
节点离页面顶部的距离为
"
+
data
.
top
);
})
.
exec
();
```
**注意**
-
nvue 暂不支持 uni.createSelectorQuery,暂时使用下面的方案
```
html
...
...
@@ -186,11 +202,11 @@ view.boundingClientRect(data => {
<script>
// 注意平台差异
// #ifdef APP-NVUE
const
dom
=
weex
.
requireModule
(
'
dom
'
)
const
dom
=
weex
.
requireModule
(
"
dom
"
);
// #endif
export
default
{
data
()
{
data
()
{
return
{
size
:
{
width
:
0
,
...
...
@@ -198,20 +214,20 @@ view.boundingClientRect(data => {
top
:
0
,
bottom
:
0
,
left
:
0
,
right
:
0
}
}
right
:
0
,
}
,
}
;
},
onReady
()
{
setTimeout
(()
=>
{
const
result
=
dom
.
getComponentRect
(
this
.
$refs
.
box
,
option
=>
{
console
.
log
(
'
getComponentRect:
'
,
option
)
this
.
size
=
option
.
size
})
console
.
log
(
'
return value:
'
,
result
)
console
.
log
(
'
viewport:
'
,
dom
.
getComponentRect
(
'
viewport
'
))
},
100
);
}
}
setTimeout
(()
=>
{
const
result
=
dom
.
getComponentRect
(
this
.
$refs
.
box
,
(
option
)
=>
{
console
.
log
(
"
getComponentRect:
"
,
option
);
this
.
size
=
option
.
size
;
});
console
.
log
(
"
return value:
"
,
result
);
console
.
log
(
"
viewport:
"
,
dom
.
getComponentRect
(
"
viewport
"
));
},
100
);
},
}
;
</script>
```
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录