参考链接:https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createSelectorQuery.html
https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createIntersectionObserver.html
小程序中如何获取界面节点信息
在微信小程序中,要获取界面上的节点信息,会用到两个API,下面会进行介绍
(1)节点信息查询API→SelectorQuery
此对象可以用于获取节点属性、样式、在界面上的位置等信息。在小程序中最常见的用法是使用这个接口来查询某个节点的当前位置,以及界面的滚动位置。
SelectorQuery对象的方法有以下:
①select:在当前页面下选择第一个匹配选择器 selector 的节点。返回一个 NodesRef 对象实例,可以用于获取节点信息。
②selectAll:在当前页面下选择匹配选择器 selector 的所有节点。
③selectViewport:选择显示区域。可用于获取显示区域的尺寸、滚动位置等信息。
④exec:执行所有的请求。请求结果按请求次序构成数组,在callback的第一个参数中返回。
示例代码:
const query = wx.createSelectorQuery()
query.select('#the-id').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(