简体中文
返回一个SelectorQuery对象实例
selector 说明:
selector
类似于 CSS 的选择器,但仅支持下列语法。
#the-id
.a-class
类型 |
---|
SelectorQuery |
将选择器的选取范围更改为自定义组件component内
名称 | 类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
component | any | null | 否 | - |
类型 |
---|
SelectorQuery |
在当前页面下选择第一个匹配选择器selector的节点
名称 | 类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
selector | string | 是 | - | - |
类型 |
---|
NodesRef |
添加节点的布局位置的查询请求,相对于显示区域,以像素为单位
名称 | 类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
callback | (result: any) => void | null | 否 | - |
类型 |
---|
SelectorQuery |
添加节点的滚动位置查询请求,以像素为单位
名称 | 类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
callback | (result: any) => void | 是 | - |
类型 |
---|
SelectorQuery |
获取节点的相关信息,需要获取的字段在fields中指定
名称 | 类型 | 必填 | 默认值 | 描述 | |||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
fields | NodeField | 是 | - | - | |||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||
callback | (result: any) => void | 是 | - |
Android | iOS | web | |
---|---|---|---|
context | x | x | 4.0 |
类型 |
---|
SelectorQuery |
添加节点的 Context 对象查询请求
名称 | 类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
callback | (result: any) => void | 是 | - |
类型 |
---|
SelectorQuery |
Android | iOS | web |
---|---|---|
x | x | 4.0 |
获取 Node 节点实例。目前支持 Canvas 的获取。
名称 | 类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
callback | (result: any) => void | 是 | - | - |
类型 |
---|
SelectorQuery |
在当前页面下选择匹配选择器selector的所有节点
名称 | 类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
selector | string | 是 | - | - |
类型 |
---|
NodesRef |
选择显示区域
类型 |
---|
NodesRef |
执行所有的请求
名称 | 类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
callback | (result: Array<any>) => void | null | 是 | - | - |
类型 | 必备 |
---|---|
NodesRef | null | 否 |
属性 | 类型 | 说明 |
---|---|---|
id | String | 节点的 ID |
dataset | Object | 节点的 dataset |
left | Number | 节点的左边界坐标 |
right | Number | 节点的右边界坐标 |
top | Number | 节点的上边界坐标 |
bottom | Number | 节点的下边界坐标 |
width | Number | 节点的宽度 |
height | Number | 节点的高度 |
Android | iOS | web |
---|---|---|
3.91 | 4.11 | 4.0 |
Template
Script
<template>
<view class="page" id="page">
<page-head :title="title"></page-head>
<button class="btn btn-get-node-info" @click="getNodeInfo">getNodeInfo</button>
<button class="btn btn-get-all-node-info" @click="getAllNodeInfo">getAllNodeInfo</button>
<view id="rect-1-2" class="rect-1-2">
<view class="rect rect1"></view>
<view class="rect rect2"></view>
</view>
<view class="rect-info-1-2">
<view class="rect-info" v-for="(nodeInfo, index) in nodeInfoList" :key="index">
<view class="node-info-item">
<text class="node-info-item-k">left: </text>
<text class="node-info-item-v">{{nodeInfo.left}}</text>
</view>
<view class="node-info-item">
<text class="node-info-item-k">top: </text>
<text class="node-info-item-v">{{nodeInfo.top}}</text>
</view>
<view class="node-info-item">
<text class="node-info-item-k">right: </text>
<text class="node-info-item-v">{{nodeInfo.right}}</text>
</view>
<view class="node-info-item">
<text class="node-info-item-k">bottom: </text>
<text class="node-info-item-v">{{nodeInfo.bottom}}</text>
</view>
<view class="node-info-item">
<text class="node-info-item-k">width: </text>
<text class="node-info-item-v">{{nodeInfo.width}}</text>
</view>
<view class="node-info-item">
<text class="node-info-item-k">height: </text>
<text class="node-info-item-v">{{nodeInfo.height}}</text>
</view>
</view>
</view>
<node-child class="node-child"></node-child>
</view>
</template>
<style>
.page {
padding: 15px;
flex: 1;
}
.btn {
margin-top: 15px;
}
.rect-1-2 {
flex-direction: row;
margin-top: 15px;
}
.rect {
width: 150px;
height: 100px;
}
.rect1 {
background-color: dodgerblue;
}
.rect2 {
margin-left: auto;
background-color: seagreen;
}
.rect-info-1-2 {
flex-direction: row;
margin-top: 15px;
}
.rect-info {
flex: 1;
flex-direction: column;
}
.node-info-item {
flex-direction: row;
}
.node-info-item-k {
width: 72px;
line-height: 2;
}
.node-info-item-v {
font-weight: bold;
line-height: 2;
}
</style>
组件内使用
<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() {
uni.createSelectorQuery().in(this).select('.rect1').boundingClientRect().exec((ret) => {
this.nodeInfoList.length = 0
this.nodeInfoList.push(ret[0] as NodeInfo)
})
}
}
}
</script>
名称 | 类型 | 必备 | 默认值 | 描述 |
---|---|---|---|---|
errMsg | string | 是 | - | 错误信息 |
exec 示例说明:
exec()
返回所有动作的集合,每一项的数据类型取决于查询动作,结果排序按照调用动作顺序
示例:
uni.createSelectorQuery().select('.rect1').boundingClientRect().exec()
// 共返回 1 条结果,第一项数据类型为 NodeInfo
result = [ {} ]
uni.createSelectorQuery().selectAll('.rect1').boundingClientRect().exec()
// 共返回 1 条结果,第一项数据类型为 NodeInfo[]
result = [ [{},{}] ]
uni.createSelectorQuery().select('.rect1').selectAll('.rect2').boundingClientRect().exec()
// 共返回 2 条结果,第一项数据类型为 NodeInfo,第二项数据类型类型为 NodeInfo[]
result = [ {}, [{},{}] ]
** 注意事项:**
<template>
下如果存在多个节点,会导致非第一个节点查询不到的问题<template>
下如果存在多个节点,如果是在组件内部查询,可能会导致查询到其他组件或页面的元素