界面上的节点信息的获取

文章来自：源码在线https://www.shengli.me/wxxcx/130.html

wxml节点信息：

 

节点信息查询API可以用于获取节点属性、样式、在界面上的位置等信息。

最常见的用法是使用这个接口来查询某个节点的当前位置，以及界面的滚动位置。

 

代码：

 

上述示例中,#the-id是一个节点选择器，与 CSS 的选择器相近但略有区别，请参见 SelectorQuery.select 的相关说明。

在自定义组件中，推荐使用this.createselectorQuery来代替wx.createselectorQuery，这样会将选择器选取范围定在这个自定义组件内。

 

wxml节点布局相交状态

节点布局相交状态API可用于监听两个或多个组件节点在布局位置上的相交状态。这一组API常常可以用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。

这一组API涉及的主要概念如下。

• 参照节点：监听的参照节点，取它的布局区域作为参照区域。如果有多个参照节点，则会取它们布局区域的 交集 作为参照区域。页面显示区域也可作为参照区域之一。

• 目标节点：监听的目标，默认只能是一个节点（使用select All选项时，可以同时监听多个节点）。

• 相交区域：目标节点的布局区域与参照区域的相交区域。

• 相交比例：相交区域占参照区域的比例。

• 阈值：相交比例如果达到阈值，则会触发监听器的回调函数。阈值可以有多个。

以下示例代码可以在目标节点（用选择器.target-class指定）每次进入或离开页面显示区域时，触发回调函数。

 

代码：

以下示例代码可以在目标节点（用选择器.target-class指定）与参照节点（用选择器.relative-class指定）在页面显示区域内相交或相离，且相交或相离程度达到目标节点布局区域的20%和50%时，触发回调函数。

 

在自定义组件中，推荐使用this.createIntersectionObserver来代替wx.createIntersectionObserver，这样会将选择器选取范围定在这个自定义组件内。