场景描述:在使用uniapp框架开发小程序和H5多端兼容开发 其中涉及到中英文切换 在切换的时候会重置页面,小程序上不会有报错,倒是h5上会提示Cannot read property ‘bottom’ of null
报错原因:
小程序中使用uni.reLaunch重置页面,会重置createIntersectionObserver,但是h5不会
解决方法
在离开页面时this.obAnchor.disconnect()
优化建议
由于使用的场景是头部通用组件 每个页面都需要清除,如果是使用vue开发的小伙伴建议使用混入(react的小伙伴可以使用装饰器来扩展类)
下面是使用vue的方法
全局混入
Vue.mixin({
data: function () {
return {
}
},
computed: {
},
onLoad () {},
beforeDestroy () {
if (this.$refs.header) {
this.$refs.header.clearObserver()
}
}
})
组件使用示例
<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:局部混入肯定比全局混入性能更好 追求性能就局部混入