Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
小浣熊撸代码
uni-app
提交
1c91ff19
U
uni-app
项目概览
小浣熊撸代码
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
1
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
1
Issue
1
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
1c91ff19
编写于
12月 06, 2019
作者:
Q
qiang
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
docs: nodesRef.context
上级
22a3720a
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
37 addition
and
37 deletion
+37
-37
docs/api/ui/nodes-info.md
docs/api/ui/nodes-info.md
+37
-37
未找到文件。
docs/api/ui/nodes-info.md
浏览文件 @
1c91ff19
## uni.createSelectorQuery()
返回一个
``SelectorQuery``
对象实例。可以在这个实例上使用
``select``
等方法选择节点,并使用
``boundingClientRect``
等方法选择需要查询的信息。
**Tips:**
...
...
@@ -16,12 +16,12 @@
将选择器的选取范围更改为自定义组件
``component``
内,返回一个
``SelectorQuery``
对象实例。(初始时,选择器仅选取页面范围的节点,不会选取任何自定义组件中的节点)。
**代码示例**
```
javascript
```
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
();
```
### selectorQuery.select(selector)
...
...
@@ -36,21 +36,21 @@ query.select('#id').boundingClientRect(data => {
-
子元素选择器:
``.the-parent > .the-child``
-
后代选择器:
``.the-ancestor .the-descendant``
-
跨自定义组件的后代选择器:
``.the-ancestor >>> .the-descendant``
-
多选择器的并集:
``#a-node, .some-other-nodes``
-
多选择器的并集:
``#a-node, .some-other-nodes``
### selectorQuery.selectAll(selector)
在当前页面下选择匹配选择器
``selector``
的所有节点,返回一个
``NodesRef``
对象实例,可以用于获取节点信息。
### selectorQuery.selectViewport()
选择显示区域,可用于获取显示区域的尺寸、滚动位置等信息,返回一个
``NodesRef``
对象实例。
### selectorQuery.exec(callback)
执行所有的请求。请求结果按请求次序构成数组,在callback的第一个参数中返回。
执行所有的请求。请求结果按请求次序构成数组,在callback的第一个参数中返回。
## NodesRef
用于获取节点信息的对象
...
...
@@ -110,37 +110,37 @@ query.select('#id').boundingClientRect(data => {
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|
x
|√|x|x|x|√|
|√|
2.4.5+
|√|x|x|x|√|
**callback 返回参数**
| 属性 | 类型 | 说明 |
| --- | --- | --- |
| context | Object | 节点对应的 Context 对象 |
### 代码示例
```
javascript
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
();
### 代码示例
```
javascript
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
();
```
**注意**
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录