在uniapp中获取到节点的位置信息等(高度、宽度、left、right、top、bottom等)
在uniapp中我们有时候也会用到获取节点信息等操作,那么我们根据官方文档可以进行查阅,可以使用uni.createSelectorQuery()进行操作。
·
前言:
在uniapp中我们有时候也会用到获取节点信息等操作,那么我们根据官方文档可以进行查阅,可以使用uni.createSelectorQuery()进行操作
一、uni.createSelectorQuery()介绍
返回一个 SelectorQuery 对象实例。可以在这个实例上使用 select 等方法选择节点,并使用 boundingClientRect 等方法选择需要查询的信息。
Tips:
使用 uni.createSelectorQuery() 需要在生命周期 mounted 后进行调用。
默认需要使用到 selectorQuery.in 方法。
返回的参数
callback 返回参数:
属性 | 类型 | 说明 |
id | String | 节点的 ID |
dataset | Object | 节点的 dataset |
left | Number | 节点的左边界坐标 |
right | Number | 节点的右边界坐标 |
top | Number | 节点的上边界坐标 |
bottom | Number | 节点的下边界坐标 |
width | Number | 节点的宽度 |
height | Number | 节点的高度 |
二、使用示例
代码:
onReady() {
let view = uni.createSelectorQuery().select(".home-data");
view.boundingClientRect(data=>{
console.log("信息",data);
this.clientHeight = data.height
}).exec();
},
获取的信息:
更多推荐
已为社区贡献5条内容
所有评论(0)