小程序检测元素首次出现在可视区域上报埋点遇到的问题 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>
相关推荐
@小红花30 分钟前
从0到1学习Vue框架Day03
前端·javascript·vue.js·学习·ecmascript
2501_9159184130 分钟前
uni-app 项目 iOS 上架效率优化 从工具选择到流程改进的实战经验
android·ios·小程序·uni-app·cocoa·iphone·webview
前端与小赵32 分钟前
vue3中 ref() 和 reactive() 的区别
前端·javascript·vue.js
魔云连洲1 小时前
Vue的响应式底层原理:Proxy vs defineProperty
前端·javascript·vue.js
00后程序员张1 小时前
如何在不同 iOS 设备上测试和上架 uni-app 应用 实战全流程解析
android·ios·小程序·https·uni-app·iphone·webview
专注VB编程开发20年1 小时前
CSS定义网格的列模板grid-template-columns什么意思,为什么要用这么复杂的单词
前端·css
IT_陈寒1 小时前
Redis性能提升50%的7个关键优化策略,90%开发者都不知道第5点!
前端·人工智能·后端
Hilaku1 小时前
深入URL和URLSearchParams:别再用正则表达式去折磨URL了
前端·javascript·代码规范
pubuzhixing1 小时前
Canvas 的性能卓越,用它解决一个棘手问题
前端
weixin_456904271 小时前
Vue.jsmain.js/request.js/user.js/store/index.js Vuex状态管理项目核心模块深度解析
前端·javascript·vue.js