步骤：
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();}});
