uni.createSelectorQuery()

返回一个SelectorQuery对象实例

selector 说明：

selector 类似于 CSS 的选择器，但仅支持下列语法。

• ID选择器：#the-id
• class选择器：.a-class

Return value

Type
SelectorQuery

SelectorQuery Values

name	type	optinal	default	description
in	(component?: any) => SelectorQuery	YES	-	将选择器的选取范围更改为自定义组件component内
select	(selector: string) => NodesRef	YES	-	在当前页面下选择第一个匹配选择器selector的节点
selectAll	(selector: string) => NodesRef	YES	-	在当前页面下选择匹配选择器selector的所有节点
selectViewport	() => NodesRef	YES	-	选择显示区域
exec	(callback: (result: Array<any>) => void) => NodesRef	YES	-	执行所有的请求

NodesRef Values

name	type	optinal	default	description
boundingClientRect	(callback?: (result: any) => void) => SelectorQuery	YES	-	添加节点的布局位置的查询请求，相对于显示区域，以像素为单位
scrollOffset	(callback: (result: any) => void) => SelectorQuery	YES	-	添加节点的滚动位置查询请求，以像素为单位
fields	(fields: NodeField, callback: (result: any) => void) => SelectorQuery	YES	-	获取节点的相关信息，需要获取的字段在fields中指定
node	(callback: (result: any) => void) => SelectorQuery	YES	-	获取 Node 节点实例。目前支持 Canvas 的获取。

NodeField Values

name	type	optinal	default	description
id	boolean	NO	-	是否返回节点 id
dataset	boolean	NO	-	是否返回节点 dataset
rect	boolean	NO	-	是否返回节点布局位置（left right top bottom）
size	boolean	NO	-	是否返回节点尺寸（width height）
scrollOffset	boolean	NO	-	是否返回节点的 scrollLeft scrollTop，节点必须是 scroll-view 或者 viewport
properties	Array<string>	NO	-	指定属性名列表，返回节点对应属性名的当前属性值（只能获得组件文档中标注的常规属性值，id class style 和事件绑定的属性值不可获取）
computedStyle	Array<string>	NO	-	指定样式名列表，返回节点对应样式名的当前值

NodeInfo 属性值

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

Return value

Type
SelectorQuery

SelectorQuery Values

name	type	optinal	default	description
in	(component?: any) => SelectorQuery	YES	-	将选择器的选取范围更改为自定义组件component内
select	(selector: string) => NodesRef	YES	-	在当前页面下选择第一个匹配选择器selector的节点
selectAll	(selector: string) => NodesRef	YES	-	在当前页面下选择匹配选择器selector的所有节点
selectViewport	() => NodesRef	YES	-	选择显示区域
exec	(callback: (result: Array<any>) => void) => NodesRef	YES	-	执行所有的请求

NodesRef Values

name	type	optinal	default	description
boundingClientRect	(callback?: (result: any) => void) => SelectorQuery	YES	-	添加节点的布局位置的查询请求，相对于显示区域，以像素为单位
scrollOffset	(callback: (result: any) => void) => SelectorQuery	YES	-	添加节点的滚动位置查询请求，以像素为单位
fields	(fields: NodeField, callback: (result: any) => void) => SelectorQuery	YES	-	获取节点的相关信息，需要获取的字段在fields中指定
node	(callback: (result: any) => void) => SelectorQuery	YES	-	获取 Node 节点实例。目前支持 Canvas 的获取。

NodeField Values

name	type	optinal	default	description
id	boolean	NO	-	是否返回节点 id
dataset	boolean	NO	-	是否返回节点 dataset
rect	boolean	NO	-	是否返回节点布局位置（left right top bottom）
size	boolean	NO	-	是否返回节点尺寸（width height）
scrollOffset	boolean	NO	-	是否返回节点的 scrollLeft scrollTop，节点必须是 scroll-view 或者 viewport
properties	Array<string>	NO	-	指定属性名列表，返回节点对应属性名的当前属性值（只能获得组件文档中标注的常规属性值，id class style 和事件绑定的属性值不可获取）
computedStyle	Array<string>	NO	-	指定样式名列表，返回节点对应样式名的当前值

createSelectorQuery Compatibility

Android version	Android uni-app	Android uni-app-x	iOS version	iOS uni-app	iOS uni-app-x
5.0	√	3.91	10.0	√	√

See also

createSelectorQuery

Related Bug

Example

hello uni-app x

<template>
 <view class="uni-padding-wrap">
   <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 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>
 </view>
</template>

<script>
 type NodeInfoType = {
   left : number | null,
   top : number | null,
   right : number | null,
   bottom : number | null,
   width : number | null,
   height : number | null,
 }

 export default {
   data() {
     return {
       title: 'createSelectorQuery',
       nodeInfoList: [] as NodeInfoType[],
     }
   },
   methods: {
     getNodeInfo() {
       uni.createSelectorQuery().select('.rect1').boundingClientRect().exec((ret) => {
         this.nodeInfoList.length = 0
         const i = ret[0] as NodeInfo
         this.nodeInfoList.push({
           left: i.left,
           top: i.top,
           right: i.right,
           bottom: i.bottom,
           width: i.width,
           height: i.height,
         } as NodeInfoType)
       })
     },
     getAllNodeInfo() {
       uni.createSelectorQuery().selectAll('.rect').boundingClientRect().exec((ret) => {
         this.nodeInfoList.length = 0
         const array = ret[0] as NodeInfo[]
         array.forEach((i) => {
           this.nodeInfoList.push({
             left: i.left,
             top: i.top,
             right: i.right,
             bottom: i.bottom,
             width: i.width,
             height: i.height,
           } as NodeInfoType)
         })
       })
     }
   }
 }
</script>

<style>
 .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>

组件内使用

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

<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>

General type

GeneralCallbackResult

name	type	optinal	default	description
errMsg	string	YES	-	错误信息

exec 示例说明：

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

示例：

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

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

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