From 1c91ff1929b73ed3f09a1541958a39b603746e1f Mon Sep 17 00:00:00 2001 From: qiang Date: Fri, 6 Dec 2019 21:26:15 +0800 Subject: [PATCH] docs: nodesRef.context --- docs/api/ui/nodes-info.md | 74 +++++++++++++++++++-------------------- 1 file changed, 37 insertions(+), 37 deletions(-) diff --git a/docs/api/ui/nodes-info.md b/docs/api/ui/nodes-info.md index 4efedaac9..ea5d40a07 100644 --- a/docs/api/ui/nodes-info.md +++ b/docs/api/ui/nodes-info.md @@ -1,5 +1,5 @@ ## 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(); ``` **注意** -- GitLab