使用applet api接口动态获取元素宽度和高度(applet api函数)

通过wx . createselectquery（）API接口，微信小程序可以动态获取视图元素的宽度和高度。

api接口的使用:

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

var obj = wx . createselectquery（）；

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

有五种方法可以返回对象:

1.obj . in（component）:这个方法从未使用过，它主要用于组件的选择器。

2.obj . select（selector）:获取指定的节点，selector是一个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.scroll offset（function（RES）{ }）:获取节点的水平和垂直滚动位置等。节点必须是scroll -视图或视口。

3.fields（fields，function（）{ RES }）:这可以获取指定元素的自定义属性和类名。有关详细信息，请参考官方文档。

（学习视频分享:编程入门）

废话不多说，真正的用法示例:

如果你觉得这样写有点长。你可以一步一步地写。同样的结果。

var obj = wx . createselectquery（）；select all（& amp；#39;。NPL -intro & amp；#39;).boundingClientRect（function（rect）{ console . log（rect【0】）。height）console . log（rect【0】。width）}）obj . exec（）；或者在exec中返回，如果上面的方式得到的rect为null，可以考虑使用下面这个，不会有问题。结果是一样的。

var obj = wx . createselectquery（）；select all（& amp；#39;。NPL -intro & amp；#39;).boundingClientRect（）；obj . exec（function（rect）{ console . log（rect【0】。height）console . log（rect【0】。width）}）；当然，这个方法可以用onLoad、onReady、onShow等生命周期方法编写。，或者在自定义方法中。需要的时候随时打电话。

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

//动态设置高度settimeout（function（）{ var query = wx . createselectquery（）；query . select（& amp；#39;。Nd-BTN box & amp；#39;).boundingClientRect（）；query . exec（function（rect）{ if（rect【0】= = = null）return；that . setdata（{ margin BM:rect【0】。height+10 }）}）；}，500）相关推荐:小程序开发教程

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

• 如何实现小程序发送服务通知（小程序如何主动向用户发送通知）
• 如何获取小程序的unionid（如何获取小程序的页面路径）
• 生成海报的示例小程序（Java后端）（微信小程序生成海报演示）
• 什么是小程序？ 有哪些功能？（什么是小程序？有哪些功能？）
• 介绍如何用小程序生成参数二维码（二维码+小程序参数）

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