提交 1c91ff19 编写于 作者: Q qiang

docs: nodesRef.context

上级 22a3720a
## uni.createSelectorQuery() ## uni.createSelectorQuery()
返回一个 ``SelectorQuery`` 对象实例。可以在这个实例上使用 ``select`` 等方法选择节点,并使用 ``boundingClientRect`` 等方法选择需要查询的信息。 返回一个 ``SelectorQuery`` 对象实例。可以在这个实例上使用 ``select`` 等方法选择节点,并使用 ``boundingClientRect`` 等方法选择需要查询的信息。
**Tips:** **Tips:**
...@@ -16,12 +16,12 @@ ...@@ -16,12 +16,12 @@
将选择器的选取范围更改为自定义组件 ``component`` 内,返回一个 ``SelectorQuery`` 对象实例。(初始时,选择器仅选取页面范围的节点,不会选取任何自定义组件中的节点)。 将选择器的选取范围更改为自定义组件 ``component`` 内,返回一个 ``SelectorQuery`` 对象实例。(初始时,选择器仅选取页面范围的节点,不会选取任何自定义组件中的节点)。
**代码示例** **代码示例**
```javascript ```javascript
const query = uni.createSelectorQuery().in(this); const query = uni.createSelectorQuery().in(this);
query.select('#id').boundingClientRect(data => { query.select('#id').boundingClientRect(data => {
console.log("得到布局位置信息" + JSON.stringify(data)); console.log("得到布局位置信息" + JSON.stringify(data));
console.log("节点离页面顶部的距离为" + data.top); console.log("节点离页面顶部的距离为" + data.top);
}).exec(); }).exec();
``` ```
### selectorQuery.select(selector) ### selectorQuery.select(selector)
...@@ -36,21 +36,21 @@ query.select('#id').boundingClientRect(data => { ...@@ -36,21 +36,21 @@ query.select('#id').boundingClientRect(data => {
- 子元素选择器:``.the-parent > .the-child`` - 子元素选择器:``.the-parent > .the-child``
- 后代选择器:``.the-ancestor .the-descendant`` - 后代选择器:``.the-ancestor .the-descendant``
- 跨自定义组件的后代选择器:``.the-ancestor >>> .the-descendant`` - 跨自定义组件的后代选择器:``.the-ancestor >>> .the-descendant``
- 多选择器的并集:``#a-node, .some-other-nodes`` - 多选择器的并集:``#a-node, .some-other-nodes``
### selectorQuery.selectAll(selector) ### selectorQuery.selectAll(selector)
在当前页面下选择匹配选择器 ``selector`` 的所有节点,返回一个 ``NodesRef`` 对象实例,可以用于获取节点信息。 在当前页面下选择匹配选择器 ``selector`` 的所有节点,返回一个 ``NodesRef`` 对象实例,可以用于获取节点信息。
### selectorQuery.selectViewport() ### selectorQuery.selectViewport()
选择显示区域,可用于获取显示区域的尺寸、滚动位置等信息,返回一个 ``NodesRef`` 对象实例。 选择显示区域,可用于获取显示区域的尺寸、滚动位置等信息,返回一个 ``NodesRef`` 对象实例。
### selectorQuery.exec(callback) ### selectorQuery.exec(callback)
执行所有的请求。请求结果按请求次序构成数组,在callback的第一个参数中返回。 执行所有的请求。请求结果按请求次序构成数组,在callback的第一个参数中返回。
## NodesRef ## NodesRef
用于获取节点信息的对象 用于获取节点信息的对象
...@@ -110,37 +110,37 @@ query.select('#id').boundingClientRect(data => { ...@@ -110,37 +110,37 @@ query.select('#id').boundingClientRect(data => {
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序| |App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|x|x|x|√| |√|2.4.5+|√|x|x|x|√|
**callback 返回参数** **callback 返回参数**
| 属性 | 类型 | 说明 | | 属性 | 类型 | 说明 |
| --- | --- | --- | | --- | --- | --- |
| context | Object | 节点对应的 Context 对象 | | context | Object | 节点对应的 Context 对象 |
### 代码示例 ### 代码示例
```javascript ```javascript
uni.createSelectorQuery().selectViewport().scrollOffset(res => { uni.createSelectorQuery().selectViewport().scrollOffset(res => {
console.log("竖直滚动位置" + res.scrollTop); console.log("竖直滚动位置" + res.scrollTop);
}).exec(); }).exec();
let view = uni.createSelectorQuery().in(this).select(".test"); let view = uni.createSelectorQuery().in(this).select(".test");
view.fields({ view.fields({
size: true, size: true,
scrollOffset: true scrollOffset: true
}, data => { }, data => {
console.log("得到节点信息" + JSON.stringify(data)); console.log("得到节点信息" + JSON.stringify(data));
console.log("节点的宽为" + data.width); console.log("节点的宽为" + data.width);
}).exec(); }).exec();
view.boundingClientRect(data => { view.boundingClientRect(data => {
console.log("得到布局位置信息" + JSON.stringify(data)); console.log("得到布局位置信息" + JSON.stringify(data));
console.log("节点离页面顶部的距离为" + data.top); console.log("节点离页面顶部的距离为" + data.top);
}).exec(); }).exec();
``` ```
**注意** **注意**
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册