微信小程序实现动态获取元素宽高的方法分析

在开发微信小程序的过程中，我们经常需要获取某个元素的宽高来进行一些动态操作、布局等。下面就来详细讲解如何实现动态获取元素宽高的方法。

方法1：使用wx.createSelectorQuery()

wx.createSelectorQuery() 是微信小程序提供的API，它可以获取到页面中某个节点的信息。其使用方法如下：

wx.createSelectorQuery().select("#myId").boundingClientRect(function(rect){
    console.log(rect.width); // 元素宽度
    console.log(rect.height); // 元素高度
}).exec();

以上代码实现了获取 id 为 "myId" 的元素的宽高，并且输出到控制台。

需要注意的是，boundingClientRect() 是异步执行，所以在回调函数中才能获取到元素的宽高。另外，exec() 方法是必须要调用的才能触发查询操作。

方法2：使用类似于 Vue 中的 ref 属性

如果你熟悉 Vue 开发，可以使用类似于 ref 属性的方式来获取元素的宽高。具体实现方法如下：

在 wxml 文件中，给元素设置一个 id 属性，并通过 bindtap 绑定一个事件处理函数：

<view id="myId" bindtap="getMyElement"></view>

在 js 文件中，定义 getMyElement 函数，并通过 this.selectComponent("#myId") 方法获取对应的组件实例，从而获取宽高信息：

Page({
  getMyElement: function(){
    const myElement = this.selectComponent("#myId");
    myElement.boundingClientRect().exec(function(rect){
        console.log(rect.width); // 元素宽度
        console.log(rect.height); // 元素高度
    });
  }
})

以上代码实现了点击元素后获取该元素的宽高，并且输出到控制台。

需要注意的是，该方法需要给元素设置 id 属性，并且通过 selectComponent() 方法获取对应的组件实例。

结语

以上两种方法实现了动态获取元素宽高的功能。需要注意的是，在使用这些方法时，组件必须已经渲染完成才能获取到元素的宽高信息，否则会返回空值。