微信小程序开发获取节点信息

陈哲忠

已于 2023-11-29 16:16:08 修改

阅读量166

点赞数

文章标签： html5 javascript css 小程序微信小程序

于 2023-11-16 11:03:14 首次发布

本文链接：https://blog.youkuaiyun.com/chenzhezhong/article/details/134437068

版权

本文介绍在微信小程序中使用Vue.js开发时，如何通过wx.createSelectorQuery()获取元素的尺寸信息，如高度，通过.boundingBoxClientRect方法并结合CSS选择器实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：小程序开发获取元素的尺寸信息

  <template>
    <view class="test">
      <view class="ative">
        获取元素高尺寸
      </view>
    </view>
  </template>

解决方案：

   myClick() {
          let query = wx.createSelectorQuery()
          query.select('.active').boundingClientRect(react => {
              let height = react.height
              console.log('height', height))
          }).exec()
      }

上述示例中， .active 是一个节点选择器，与 CSS 的选择器相近但略有区别，请参见 SelectorQuery.select 的相关说明