微信小程序

2024-07-12 13:49| 来源: 网络整理| 查看: 265

步骤：

1、创建对象实例

2、获取/指定界面上的节点信息

3、判断节点是否在当前屏幕可视区域

微信API提供了两种获取创建对象实例和获取节点的方法，按照以上步骤，我们一一来看：

1、wx.createSelectorQuery()

wx.createSelectorQuery()

返回一个 SelectorQuery 对象实例。在自定义组件或包含自定义组件的页面中，应使用 this.createSelectorQuery() 来代替。

SelectorQuery.select(string selector)

在当前页面下选择第一个匹配选择器 selector 的节点。返回一个 NodesRef 对象实例，可以用于获取节点信息。

NodesRef.boundingClientRect(function callback)

添加节点的布局位置的查询请求。相对于显示区域，以像素为单位。其功能类似于 DOM 的 getBoundingClientRect。返回 NodesRef 对应的 SelectorQuery。

SelectorQuery.exec(function callback)

执行所有的请求。请求结果按请求次序构成数组，在callback的第一个参数中返回。

将以上方法联系起来，即可得到既定节点此时的宽高、上下左右位置

const query = wx.createSelectorQuery() query.select('#the-id').boundingClientRect() query.exec(function(res){ res[0].top // #the-id节点的上边界坐标 res[0].bottom // #the-id节点的下边界坐标 res[0].left // #the-id节点的左边界坐标 res[0].right // #the-id节点的右边界坐标 res[0].width // #the-id节点的宽度 res[0].height // #the-id节点的高度 }) 2、wx.createIntersectionObserver

wx.createIntersectionObserver(Object component, Object options)

创建并返回一个 IntersectionObserver 对象实例。在自定义组件或包含自定义组件的页面中，应使用 this.createIntersectionObserver([options]) 来代替。

IntersectionObserver.observe(string targetSelector, function callback)

指定目标节点并开始监听相交状态变化情况

IntersectionObserver.relativeToViewport(Object margins)

指定页面显示区域作为参照区域之一

wx.createIntersectionObserver().relativeToViewport().observe('.target-class', (res) => { res.intersectionRatio // 相交区域占目标节点的布局区域的比例 res.intersectionRect // 相交区域 res.intersectionRect.left // 相交区域的左边界坐标 res.intersectionRect.top // 相交区域的上边界坐标 res.intersectionRect.width // 相交区域的宽度 res.intersectionRect.height // 相交区域的高度 }) ⚠️在组件中使用以上方法创建实例时，用this.xxx代替wx.xxx，或者使xxx.in(this)

SelectorQuery.in(Component component)

将选择器的选取范围更改为自定义组件 component 内。（初始时，选择器仅选取页面范围的节点，不会选取任何自定义组件中的节点）。

const query = wx.createSelectorQuery().in(this);

示例：

视频在可视区域内播放，离开后暂停播放

【本文地址】

公司简介

联系我们