nodes-info.md 2.5 KB
Newer Older
D
DCloud_LXH 已提交
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
## uni.createSelectorQuery() @createselectorquery

<!-- UTSAPIJSON.createSelectorQuery.description -->

<!-- UTSAPIJSON.createSelectorQuery.param -->

**selector 说明:**

``selector`` 类似于 CSS 的选择器,但仅支持下列语法。
- ID选择器:``#the-id``
- class选择器:``.a-class``

<!-- UTSAPIJSON.createSelectorQuery.returnValue -->

##### NodeInfo 属性值

|属性		|类型		|说明							|
|---		|---		|---							|
|id			|String	|节点的 ID				|
|dataset|Object	|节点的 dataset		|
|left		|Number	|节点的左边界坐标	|
|right	|Number	|节点的右边界坐标	|
|top		|Number	|节点的上边界坐标	|
|bottom	|Number	|节点的下边界坐标	|
|width	|Number	|节点的宽度				|
|height	|Number	|节点的高度				|

<!-- UTSAPIJSON.createSelectorQuery.returnValue -->

<!-- UTSAPIJSON.createSelectorQuery.example -->

<!-- UTSAPIJSON.createSelectorQuery.compatibility -->

<!-- UTSAPIJSON.createSelectorQuery.tutorial -->

<!-- UTSAPIJSON.nodes-info.example -->


组件内使用

`this.createSelectorQuery()`, 等效于 `uni.createSelectorQuery().in(this)`

43 44
注意:web 平台暂不支持 this.createSelectorQuery()

D
DCloud_LXH 已提交
45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104
```html
<template>
  <view>
    <button @click="getNodeInfo">getNodeInfo</button>
    <view class="rect-1-2">
      <view class="rect rect1"></view>
      <view class="rect rect2"></view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        nodeInfoList: [] as NodeInfo[]
      }
    },
    props: {
    },
    methods: {
      getNodeInfo() {
        this.createSelectorQuery().select('.rect1').boundingClientRect().exec((ret) => {
          this.nodeInfoList.length = 0
          this.nodeInfoList.push(ret[0] as NodeInfo)
        })
      }
    }
  }
</script>
```

<!-- UTSAPIJSON.general_type.name -->

<!-- UTSAPIJSON.general_type.param -->


**exec 示例说明:**

`exec()` 返回所有动作的集合,每一项的数据类型取决于查询动作,结果排序按照调用动作顺序

示例:

```js
this.createSelectorQuery().select('.rect1').boundingClientRect().exec()
// 共返回 1 条结果,第一项数据类型为 NodeInfo
result = [ {} ]
```

```js
this.createSelectorQuery().selectAll('.rect1').boundingClientRect().exec()
// 共返回 1 条结果,第一项数据类型为 NodeInfo[]
result = [ [{},{}] ]
```

```js
this.createSelectorQuery().select('.rect1').selectAll('.rect2').boundingClientRect().exec()
// 共返回 2 条结果,第一项数据类型为 NodeInfo,第二项数据类型类型为 NodeInfo[]
result = [ {}, [{},{}] ]
```