uni.createSelectorQuery()返回一个 SelectorQuery 对象实例。可以在这个实例上使用 select 等方法选择节点,并使用 boundingClientRect 等方法选择需要查询的信息。
需要注意的是:
使用 uni.createSelectorQuery() 需要在生命周期 mounted 后进行调用。

一,selectorQuery.select(selector)

在当前页面下选择第一个匹配选择器 selector 的节点,返回一个 NodesRef 对象实例,可以用于获取节点信息
selector 类似于 CSS 的选择器,但仅支持下列语法。

ID选择器:#the-id
class选择器(可以连续指定多个):.a-class.another-class
子元素选择器:.the-parent > .the-child
后代选择器:.the-ancestor .the-descendant
跨自定义组件的后代选择器:.the-ancestor >>> .the-descendant
多选择器的并集:#a-node, .some-other-nodes

二,selectorQuery.selectAll(selector)

在当前页面下选择匹配选择器 selector 的所有节点,返回一个 NodesRef 对象实例,可以用于获取节点信息。

ID选择器:#the-id
class选择器(可以连续指定多个):.a-class.another-class
子元素选择器:.the-parent > .the-child
后代选择器:.the-ancestor .the-descendant
跨自定义组件的后代选择器:.the-ancestor >>> .the-descendant
多选择器的并集:#a-node, .some-other-nodes

三,nodesRef.boundingClientRect(callback)

添加节点的布局位置的查询请求。相对于显示区域,以像素为单位。其功能类似于 DOM 的 getBoundingClientRect。返回 NodesRef 对应的 SelectorQuery
在这里插入图片描述
返回的节点信息中,每个节点的位置用 left、right、top、bottom、width、height 字段描述。如果提供了 callback 回调函数,在执行 selectQuery 的 exec 方法后,节点信息会在 callback 中返回。

四,selectorQuery.in(component)

将选择器的选取范围更改为自定义组件 component 内,返回一个 SelectorQuery 对象实例。(初始时,选择器仅选取页面范围的节点,不会选取任何自定义组件中的节点)。

<template>
	<view class="content">
		<view class="box">
			文字
		</view>
		<view class="box" >
			文字
		</view>
		<view class="box">
			文字
		</view>
	</view>
</template>

<script>
	export default {
		onReady() {  //需要注意的是放在onload中是不行的
			const query = uni.createSelectorQuery().in(this);     //这样写就只会选择本页面组件的类名box的
			query.selectAll('.box').boundingClientRect(data => {   //回调函数,data中存储的是这些元素节点(每个节点的信息存为一个对象)的位置信息
			  console.log("得到布局位置信息" + JSON.stringify(data));
			  console.log("节点离页面顶部的距离为" + data[1].top);  //本页面共有三个,这里我只打印第二个的
			}).exec();
		}
	}
</script>

<style>
	.content {

	}
	.box{
		width: 100rpx;
		height: 100rpx;
		background-color: green;
	}
</style>

在这里插入图片描述

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐