uniapp小程序vue3获取dom实例createSelectorQuery

最新推荐文章于 2024-09-09 09:48:21 发布

曹天骄

最新推荐文章于 2024-09-09 09:48:21 发布

阅读量3.1k

点赞数

分类专栏：微信小程序文章标签： uni-app 小程序前端

本文链接：https://blog.csdn.net/solocao/article/details/128521043

版权

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

21 篇文章 1 订阅

订阅专栏

文章介绍了在页面中如何通过uni.createSelectorQuery结合组件引用获取特定ID的<div>元素的布局信息，例如#tabbar组件的长宽。在获取系统信息后，计算比例并用于适配，然后执行查询，调用boundingClientRect方法来获取元素的边界信息并打印在控制台。

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

需求，在页面中，有时需要获取渲染组件的长宽信息，可以使用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();
};