uni-app 获取 DOM 节点的相关信息

最新推荐文章于 2024-07-10 14:31:13 发布

·Mr.zuo

最新推荐文章于 2024-07-10 14:31:13 发布

阅读量6.5k

点赞数 1

本文链接：https://blog.csdn.net/zuomengjia/article/details/105896221

版权

本文介绍了在uni-app中如何获取SelectorQuery对象，获取DOM节点及其信息的方法，包括布局位置、滚动位置等，并通过代码示例展示了如何处理数据渲染后的DOM异步问题，强调了使用this.$nextTick()的重要性。

摘要由CSDN通过智能技术生成

let  query  = uni.createSelectorQuery();

功能：返回一个selectorQuery对象的实例，该实例用来查询DOM节点的信息。
注意事项：
（1）该方法需要在生命周期mounted后进行调用。
（2）nvue不支持该方法。

1、获取匹配选择器的第一个节点：

let dom = query.select(selector)

2、获取匹配选择器的所有节点

let dom = query.selectAll(selector)

上述两个方法均返回NodesRef对象实例，该实例用来获取DOM节点多少信息。

1、获取DOM节点的布局位置信息：

doms.boundingClientRect(function(res){
   
	//res:{
   left,top,right,bottom,width,height}
}).exec(function(){
   
	//上述布局位置信息获取成功后执行的回调函数
})

2、获取DOM节点的滚动位置信息：

doms.scrollOffset(function(res){
   
	//res:{
   scrollLeft,scrollTop}
})exec(function

关注