小程序检测元素首次出现在可视区域上报埋点遇到的问题 createIntersectionObserver

背景

有一个商品的介绍页面，按照头图+内容的样式排列，头图高度不固定，内容高度不固定，检测到用户可以看到内容部分的时候进行一次上报。

遇到的问题：

1、加了检测元素出现在可视区域的方法不生效
2、解决了不生效的问题之后，发现头图大加载慢的时候，内容部分会先加载一闪而过，用户其实没看到内容，但是检测的结果是内容出现到了可视区域
3、切换页面，卸载observer不生效

环境

使用的框架:vue2+taro3

解决办法

问题1：检测方法必须写到onReady方法里面，等页面加载完毕

问题2：加个定时器，500ms之后再加载

问题3：必须在onUnload方法里面卸载

完整代码

最后赋上代码

<script>
import Taro from '@tarojs/taro'
export default {data () {return {observer: null, // 监听元素是否进入可视区域timer: null}},onReady () {// 记录食谱内容是否曝光this.timer = setTimeout(() => {this.queryElement()clearTimeout(this.timer)this.timer = null}, 500)},onUnload () {this.disconnectObserver()},methods: {/*** @description 停止观察并销毁 observer 实例*/disconnectObserver () {if (this.observer) {this.observer.disconnect()this.observer = null}},/*** @description 检测元素是否加载*/queryElement () {Taro.createSelectorQuery().select('.recipe-detail-info__card').boundingClientRect().exec((res) => {if (res && res[0]) {this.setupObserver()} else {console.error('Element not found.')}})},/*** @description 检测元素是否出现在可视区域*/setupObserver () {this.observer = Taro.createIntersectionObserver()this.observer.relativeToViewport({bottom: -100}).observe('.recipe-detail-info__card', (res) => {if (res.intersectionRatio > 0) {// 上报埋点this.disconnectObserver()  //这里加是因为只想首次上报，如果实时上报可以不清除}})}}
}
</script>