提交 359726ab 编写于 作者: 辛宝Otto's avatar 辛宝Otto 🥊

style(api/ui): 调整 toc 展示,标注 createSelectorQuery.select 平台限制

上级 dab8af98
## uni.createSelectorQuery() # uni.createSelectorQuery()
返回一个 ``SelectorQuery`` 对象实例。可以在这个实例上使用 ``select`` 等方法选择节点,并使用 ``boundingClientRect`` 等方法选择需要查询的信息。 返回一个 `SelectorQuery` 对象实例。可以在这个实例上使用 `select` 等方法选择节点,并使用 `boundingClientRect` 等方法选择需要查询的信息。
**Tips:** **Tips:**
* 使用 `uni.createSelectorQuery()` 需要在生命周期 `mounted` 后进行调用。 - 使用 `uni.createSelectorQuery()` 需要在生命周期 `mounted` 后进行调用。
* 默认需要使用到 `selectorQuery.in` 方法。 - 默认需要使用到 `selectorQuery.in` 方法。
## SelectorQuery ## SelectorQuery
...@@ -13,47 +13,51 @@ ...@@ -13,47 +13,51 @@
### selectorQuery.in(component) ### selectorQuery.in(component)
将选择器的选取范围更改为自定义组件 ``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();
``` ```
**注意** **注意**
- 支付宝小程序不支持in(component),使用无效果 - 支付宝小程序不支持 in(component),使用无效果
### selectorQuery.select(selector) ### selectorQuery.select(selector)
在当前页面下选择第一个匹配选择器 ``selector`` 的节点,返回一个 ``NodesRef`` 对象实例,可以用于获取节点信息。 在当前页面下选择第一个匹配选择器 `selector` 的节点,返回一个 `NodesRef` 对象实例,可以用于获取节点信息。
**selector 说明:** **selector 说明:**
``selector`` 类似于 CSS 的选择器,但仅支持下列语法。 `selector` 类似于 CSS 的选择器,但仅支持下列语法。
- ID选择器:``#the-id``
- class选择器(可以连续指定多个):``.a-class.another-class`` - ID 选择器:`#the-id`
- 子元素选择器:``.the-parent > .the-child`` - class 选择器(可以连续指定多个):`.a-class.another-class`
- 后代选择器:``.the-ancestor .the-descendant`` - 子元素选择器:`.the-parent > .the-child`
- 跨自定义组件的后代选择器:``.the-ancestor >>> .the-descendant`` - 后代选择器:`.the-ancestor .the-descendant`
- 多选择器的并集:``#a-node, .some-other-nodes`` - 跨自定义组件的后代选择器:`.the-ancestor >>> .the-descendant` (H5 暂不支持)
- 多选择器的并集:`#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
...@@ -78,33 +82,33 @@ query.select('#id').boundingClientRect(data => { ...@@ -78,33 +82,33 @@ query.select('#id').boundingClientRect(data => {
### nodesRef.boundingClientRect(callback) ### nodesRef.boundingClientRect(callback)
添加节点的布局位置的查询请求。相对于显示区域,以像素为单位。其功能类似于 DOM 的 ``getBoundingClientRect``。返回 ``NodesRef`` 对应的 ``SelectorQuery`` 添加节点的布局位置的查询请求。相对于显示区域,以像素为单位。其功能类似于 DOM 的 `getBoundingClientRect`。返回 `NodesRef` 对应的 `SelectorQuery`
**callback 返回参数** **callback 返回参数**
|属性 |类型 |说明 | | 属性 | 类型 | 说明 |
|---|---|---| | ------- | ------ | ---------------- |
|id |String |节点的 ID| | id | String | 节点的 ID |
|dataset |Object |节点的 dataset| | dataset | Object | 节点的 dataset |
|left |Number |节点的左边界坐标| | left | Number | 节点的左边界坐标 |
|right |Number |节点的右边界坐标| | right | Number | 节点的右边界坐标 |
|top |Number |节点的上边界坐标| | top | Number | 节点的上边界坐标 |
|bottom |Number |节点的下边界坐标| | bottom | Number | 节点的下边界坐标 |
|width |Number |节点的宽度| | width | Number | 节点的宽度 |
|height |Number |节点的高度| | height | Number | 节点的高度 |
### nodesRef.scrollOffset(callback) ### nodesRef.scrollOffset(callback)
添加节点的滚动位置查询请求。以像素为单位。节点必须是 ``scroll-view`` 或者 ``viewport``。返回 ``NodesRef`` 对应的 ``SelectorQuery`` 添加节点的滚动位置查询请求。以像素为单位。节点必须是 `scroll-view` 或者 `viewport`。返回 `NodesRef` 对应的 `SelectorQuery`
**callback 返回参数** **callback 返回参数**
|属性 |类型 |说明 | | 属性 | 类型 | 说明 |
|---|---|---| | ---------- | ------ | ------------------ |
|id |String |节点的 ID| | id | String | 节点的 ID |
|dataset |Object |节点的 dataset| | dataset | Object | 节点的 dataset |
|scrollLeft |Number |节点的水平滚动位置| | scrollLeft | Number | 节点的水平滚动位置 |
|scrollTop |Number |节点的竖直滚动位置 | | scrollTop | Number | 节点的竖直滚动位置 |
### nodesRef.context(callback) ### nodesRef.context(callback)
...@@ -119,7 +123,7 @@ query.select('#id').boundingClientRect(data => { ...@@ -119,7 +123,7 @@ query.select('#id').boundingClientRect(data => {
**callback 返回参数** **callback 返回参数**
| 属性 | 类型 | 说明 | | 属性 | 类型 | 说明 |
| --- | --- | --- | | ------- | ------ | ----------------------- |
| context | Object | 节点对应的 Context 对象 | | context | Object | 节点对应的 Context 对象 |
### nodesRef.node(callback) ### nodesRef.node(callback)
...@@ -135,7 +139,7 @@ query.select('#id').boundingClientRect(data => { ...@@ -135,7 +139,7 @@ query.select('#id').boundingClientRect(data => {
**callback 返回参数** **callback 返回参数**
| 属性 | 类型 | 说明 | | 属性 | 类型 | 说明 |
| --- | --- | --- | | ---- | ------ | -------------------- |
| node | Object | 节点对应的 Node 实例 | | node | Object | 节点对应的 Node 实例 |
**注意** **注意**
...@@ -146,27 +150,39 @@ query.select('#id').boundingClientRect(data => { ...@@ -146,27 +150,39 @@ query.select('#id').boundingClientRect(data => {
### 代码示例 ### 代码示例
```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();
``` ```
**注意** **注意**
- nvue 暂不支持 uni.createSelectorQuery,暂时使用下面的方案 - nvue 暂不支持 uni.createSelectorQuery,暂时使用下面的方案
```html ```html
...@@ -186,11 +202,11 @@ view.boundingClientRect(data => { ...@@ -186,11 +202,11 @@ view.boundingClientRect(data => {
<script> <script>
// 注意平台差异 // 注意平台差异
// #ifdef APP-NVUE // #ifdef APP-NVUE
const dom = weex.requireModule('dom') const dom = weex.requireModule("dom");
// #endif // #endif
export default { export default {
data () { data() {
return { return {
size: { size: {
width: 0, width: 0,
...@@ -198,20 +214,20 @@ view.boundingClientRect(data => { ...@@ -198,20 +214,20 @@ view.boundingClientRect(data => {
top: 0, top: 0,
bottom: 0, bottom: 0,
left: 0, left: 0,
right: 0 right: 0,
} },
} };
}, },
onReady() { onReady() {
setTimeout(()=> { setTimeout(() => {
const result = dom.getComponentRect(this.$refs.box, option => { const result = dom.getComponentRect(this.$refs.box, (option) => {
console.log('getComponentRect:', option) console.log("getComponentRect:", option);
this.size = option.size this.size = option.size;
}) });
console.log('return value:', result) console.log("return value:", result);
console.log('viewport:', dom.getComponentRect('viewport')) console.log("viewport:", dom.getComponentRect("viewport"));
}, 100); }, 100);
} },
} };
</script> </script>
``` ```
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册