微信小程序--判断目标元素是否在可视区域内（可视区域播放视频）

步骤：

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);

示例：

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

const query = wx.createSelectorQuery();
query
	.select("#myVideo")
	.boundingClientRect((rect) => {
        //手动暂停之后不继续播放
		if(this.data.clickPause) return
		//不在区域的，screenHeight-屏幕高度
		if (rect.top < 0 || rect.bottom > this.screenHeight) {
			this.$video.pause();
		} else {
			this.$video.play();
		}
	})
	.exec();

wx.createIntersectionObserver()
    .relativeToViewport()
    .observe("#myVideo", (res) => {
        //手动暂停之后不继续播放
        if(this.data.clickPause) return
        // 相交区域占目标节点的布局区域的比例大于0，根据业务自行设置
        if (res.intersectionRatio > 0) {
            this.$video.play();
        } else {
            console.log('下滑页面')
            this.$video.pause();
        }
    });