解决多端开发H5/小程序 使用createIntersectionObserver造成报错Cannot read property ‘bottom‘ of null

场景描述：在使用uniapp框架开发小程序和H5多端兼容开发 其中涉及到中英文切换 在切换的时候会重置页面，小程序上不会有报错，倒是h5上会提示Cannot read property ‘bottom’ of null

报错原因：

 小程序中使用uni.reLaunch重置页面，会重置createIntersectionObserver，但是h5不会

解决方法

在离开页面时this.obAnchor.disconnect() 
// 创建监听时 this.obAnchor = uni.createIntersectionObserver(this)

优化建议

由于使用的场景是头部通用组件 每个页面都需要清除，如果是使用vue开发的小伙伴建议使用混入（react的小伙伴可以使用装饰器来扩展类）

下面是使用vue的方法

全局混入

 Vue.mixin({
    data: function () {
      return {
      }
    },
    computed: {
    },
    onLoad () {}，
    beforeDestroy () {
    // #ifdef H5
    if (this.$refs.header) {
      this.$refs.header.clearObserver()
    }
    // #endif
  }
  })

组件使用示例

<Header ref="header"/>

header组件部分代码

mounted () {
    const sys = uni.getSystemInfoSync()
    this.navHeight = sys.statusBarHeight + 46
    try {
      this.obAnchor = uni.createIntersectionObserver(this)
      this.obAnchor.relativeToViewport({ top: 20 })
        .observe('#nav-anchor', (res) => {
          const { intersectionRatio } = res
          this.isShowStatic = intersectionRatio !== 1
        })
    } catch (error) {
      console.log('监听失败')
    }
  },
  methods: {
    clearObserver () {
      if (this.obAnchor) {
        this.obAnchor.disconnect()
      }
    }
  }

ps:局部混入肯定比全局混入性能更好 追求性能就局部混入