记录uniapp微信小程序获取子组件的DOM信息

前置信息

最近在使用uniapp写微信小程序时，有一个需求，需要监听一个子组件的DOM信息，包括距离屏幕顶部的距离和DOM自身的宽高信息等。

众所周知，在微信小程序中是无法像普通浏览器一样直接获取DOM的。为了解决这个需求，微信小程序中提供了一个createSelectorQuery方法，该方法可以返回一个 SelectorQuery 对象实例，在这个实例上可以使用 select 等方法选择节点，并使用 boundingClientRect 等方法选择需要查询的信息。

 

uniapp官网出的方法如下：

const query = uni.createSelectorQuery().in(this);
query.select('#id').boundingClientRect(data => {
  console.log("得到布局位置信息" + JSON.stringify(data));
  console.log("节点离页面顶部的距离为" + data.top);
}).exec();

 

微信小程序官方文档给出的方法如下:

const query = wx.createSelectorQuery()
query.select('#the-id').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(function(res){
  res[0].top       // #the-id节点的上边界坐标
  res[1].scrollTop // 显示区域的竖直滚动位置
})

 

由于uniapp现在使用的是vue3语法，并不存在this，所以uniapp官网给出的方法无法正确获取DOM信息，建议使用微信小程序官方文档给出的方法。

 

问题

在实际使用的过程中发现，在createSelectorQuery方法只能获取到最上层组件的DOM信息，无法获取到子组件的DOM信息。

 

解决方法

const proxy = getCurrentInstance()?.proxy as any  

onMounted(async () => {  

  proxy  

    .createSelectorQuery()  

    .select('#notice-bar-scroll-view')  

    .boundingClientRect((res: any) => {  

      console.log(res)  

    })  

    .exec()  

})

 

首先通过getCurrentInstance()方法获取当前组件实例，然后基于当前实例进行信息查询。

 

注意：const query = uni.createSelectorQuery().in(proxy)，并不能正确获取。应该使用：proxy.createSelectorQuery()