uniapp中获取元素页面信息的方法
uni.createSelectorQuery()返回一个 SelectorQuery 对象实例。可以在这个实例上使用 select 等方法选择节点,并使用 boundingClientRect 等方法选择需要查询的信息。需要注意的是:使用 uni.createSelectorQuery() 需要在生命周期 mounted 后进行调用。一,selectorQuery.select(selector
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>
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)