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

背景

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

遇到的问题:

1、加了检测元素出现在可视区域的方法不生效

2、解决了不生效的问题之后,发现头图大加载慢的时候,内容部分会先加载一闪而过,用户其实没看到内容,但是检测的结果是内容出现到了可视区域

3、切换页面,卸载observer不生效

环境

使用的框架:vue2+taro3

解决办法

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

问题2:加个定时器,500ms之后再加载

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

完整代码

最后赋上代码

js 复制代码
<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>
相关推荐
腾讯TNTWeb前端团队5 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰8 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪9 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪9 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy9 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom10 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom10 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom10 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom10 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom10 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试