如何利用小程序api接口动态获取元素宽高

这篇文章主要介绍了如何利用小程序api接口动态获取元素宽高,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。

通过wx.createSelectorQuery () api接口可以让微信小程序动态获取视图元素的宽高。

api接口的使用:

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

var obj=wx.createSelectorQuery ();

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

返回的obj有五个方法:

1。,obj.in(组件):没用过这个方法,多用于组件的选择器。

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

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

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

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

5。exec(函数(res){}):执行所有的请求,请求结果按请求次序构成数组,在回调的第一个参数中返回

上面返回的NodesRef对象实例就很重要了,它有三个方法:

1。boundingClientRect(函数(矩形){}):就是这个方法,能够动态获取视图元素的高度,宽度等属性。还有其它的请看官方文档

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

3。字段(字段,function () {res}):这个可以获取指定元素的自定义属性和类名,具体的请看官方文档的说明。

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

废话了这么多,真正的实例用法:

如果觉得这样写有点长。可以分步写。也是一样的结果。