uniapp小程序vue3获取dom实例createSelectorQuery

最新推荐文章于 2025-04-16 12:39:12 发布

原创最新推荐文章于 2025-04-16 12:39:12 发布 · 3.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #小程序 #前端

微信小程序专栏收录该内容

21 篇文章

订阅专栏

需求，在页面中，有时需要获取渲染组件的长宽信息，可以使用select选择器进行查询，直接上代码如下：

<div ref="tabbar" id="tabbar" class="x-tabbar-wrap">
</div>

const getTabbarHeight = () => {
  const { windowWidth, safeAreaInsets } = <any>uni.getSystemInfoSync();
  const ratio = 750 / windowWidth;
  safeAreaInsetsBottom.value = safeAreaInsets.bottom * ratio;
  // 获取组件实例
  const instance = getCurrentInstance();
  const query = uni.createSelectorQuery().in(instance);
  query
    .select("#tabbar")
    .boundingClientRect((rect) => {
      console.log("rect", rect);
      if (rect) {
        console.log("rect", rect);
      }
    })
    .exec();
};