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

本文通过一个实例讲述了微信小程序动态获取元素宽度和高度的方法。分享给大家参考，如下：

以前觉得微信小程序不能动态获取视图元素的宽度和高度。但是，自从我看到了api接口wx.createSelectorQuery()，之前的一些问题就可以解决了。

那么，如何使用这个api接口呢？

首先，这个接口返回一个对象实例。

var obj=wx . createselectorquery()；以下是返回的对象实例obj的所有内容。

返回对象有五种方法：

1.obj.in(component):这个方法从来没有使用过，主要用于组件的选择器。

2.obj.select(selector):获取指定的节点，selector为css selector。返回一个NodesRef对象实例，可用于获取节点信息。

3.obj.selectAll(选择器):获取指定节点，选择器为css选择器。返回一个NodesRef对象实例，可用于获取节点信息。

以上两个是js中querySelector和querySelectorAll的区别。

4.obj.selectViewport():我从来没有用过这个方法。官方表示选择显示区域，可以用来获取显示区域的大小、滚动位置等信息。它还返回一个NodesRef对象实例，可用于获取节点信息。

5.exec(function(res){}):执行所有请求，请求结果将按照请求顺序组成数组，在回调的第一个参数中返回

上面返回的NodesRef对象实例非常重要，它有三种方法：

1.bounding client(function(rect){ }):这是方法，可以动态获取视图元素的高度、宽度等属性。还有其他人。请看官方文件

2.scrollOffset(函数(res) {}):获取节点的水平和垂直滚动位置。节点必须是滚动视图或视口

3.字段(字段、函数(){res}):这可以获取指定元素的自定义属性和类名。详见官方文件。

废话这么多，真实例子用法：

Wx.createselectorquery()。selectall('。不良贷款-介绍')。bounding client correct(function(rect){ console . log(rect[0])。高度)console.log (rect [0]。宽度)})。exec()如果你觉得有点长的话。可以一步一步写。结果是一样的。

var obj=wx . createselectorquery()；obj.selectAll('。npl-intro ')。boundingClientRect(函数(rect) { console.log(rect[0])。高度)console.log(rect[0]。width)})obj . exec()；或者在执行时返回。如果用上面的方法得到的rect为null，可以考虑用下面的一个，不会有问题。结果是一样的。

var obj=wx . createselectorquery()；obj.selectAll('。npl-intro ')。boundingClientRect()；obj . exec(function(rect){ console . log(rect[0])。高度)console.log(rect[0]。宽度)})；当然，这个方法可以用诸如onLoad、onReady、onShow等生命周期方法编写。也可以用自定义方法编写。有需要随时打电话。

注意：如果要获取wx:if和setData显示和隐藏的元素，则调用此方法时获得的内容可能为空。我的解决方案是增加一个定时器：因为这个获取元素的方法是异步的，我们要延迟才能获取，否则有可能在加载元素之前调用这个方法，返回的结果是null。

//动态设置height settimeout(function(){ varquery=wx . createselectorquery()；query.select('。nd-btnBox ')。boundingClientRect()；query.exec(函数(rect){ if(rect[0]==null)返回；that . setdata({ margin bm3360 rect[0])。高度10 })})；}，500)官方wx.createSelectorQuery()接口

希望本文对微信小程序的开发有所帮助。