利用applet的api接口动态获取元素的宽度和高度

wx . createselectquery()API接口允许微信小程序动态获取视图元素的宽度和高度。

api的使用:

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

var obj = wx . createselectquery()；

以下是返回的对象实例obj的所有内容。

有五种方法可以返回的obj:

1.obj.in(component):这个方法以前从来没有用过，但是多用于组件的选择器。

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

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

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

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

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

返回的NodesRef对象实例非常重要。它有三种方法:

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

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

3.Fields (fields，function () {res}):这可以获得指定元素的自定义属性和类名。详情请参考官方文件。

(学习视频分享:编程入门)

废话这么多，真正的用法举例:

如果你觉得有点长。可以一步一步写。都是一样的结果。

var obj = wx . createselectquery()；obj . selectall( # 39；. NPL -intro # 39；).bounding client rect(function(rect){ console . log(rect[0])。height) console.log(rect[0]。width)})obj . exec()；或者返回执行模式。如果出现上面的方法，得到的rect为null，可以考虑使用下面的方法，不会有问题。结果是一样的。

var obj = wx . createselectquery()；obj . selectall( # 39；. NPL -intro # 39；).boundingClientRect()；obj . exec(function(rect){ console . log(rect[0])。height) console.log(rect[0]。宽度)})；当然，这种方法可以用生命周期方法如onLoad、onReady、onShow等来编写。或者在自定义方法中。需要的时候随时打电话。

注意:如果要获取通过wx:if和setData显示和隐藏的元素，调用的这个方法时，获取的内容可能为null。我的解决方案是添加一个计时器:因为这种获取元素的方法是异步的，所以我们必须延迟获取它们。否则，这个方法可能会在元素加载之前被调用，当然返回的结果将是null。

//动态设置高度settimeout(function(){ varquery = wx . createselectquery()；query . select( # 39；. Nd-BTN box # 39；).boundingClientRect()；query . exec(function(rect){ if(rect[0]= = = null)return；that.setData({ marginBM: rect[0])。height+10 })})；}，500)相关推荐:以上小程序开发教程是利用小程序的api接口动态获取元素宽度和高度的详细内容。更多请关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 腾讯云nlp api接口应用及配置教程(腾讯云nlp API接口应用及配置教程视频)

本文由主机参考刊发，转载请注明：利用applet的api接口动态获取元素的宽度和高度 https://zhujicankao.com/80227.html