uni-app uni.createIntersectionObserver(this)在H5和安卓环境下使用报错

uni-app uni.createIntersectionObserver(this)在H5和安卓环境下使用报错

操作步骤：

  • 创建API即可浮现

预期结果：

  • 屏蔽错误

实际结果：

  • let observer = uni.createIntersectionObserver(this)

bug描述：

在使用uni.createIntersectionObserver(this)时，在浏览器和安卓APP上会报错：

10chunk-vendors.js:98 Uncaught TypeError: Cannot read property 'bottom' of null
at a (chunk-vendors.js:98)
at chunk-vendors.js:98
at Array.forEach (<anonymous>)
at IntersectionObserver.c.<computed>.IntersectionObserver.root (chunk-vendors.js:98)

在微信小程序不会，chunk-vendors.js:98点开具体报错位置为：

return { bottom: t.bottom, height: t.height, left: t.left, right: t.right, top: t.top, width: t.width };

Image


更多关于uni-app uni.createIntersectionObserver(this)在H5和安卓环境下使用报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

未复现此问题，试下用示例代码hello uni-app能出现你的问题吗？ 不能的话你需要排查出来具体你哪个页面，甚至哪一行导致的。 找出来具体原因后提供一个能复现你描述的bug的最小化demo，让我们及时定位问题，及时修复。

更多关于uni-app uni.createIntersectionObserver(this)在H5和安卓环境下使用报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个错误是由于 uni.createIntersectionObserver(this) 在 H5 和安卓环境下，其内部依赖的 DOM 元素在某些情况下可能为 null，导致访问 bottom 属性时出错。具体来说，当观察的目标元素尚未渲染或已从 DOM 中移除时，框架尝试获取其边界矩形信息（如 bottom、height 等），但元素引用丢失，从而触发 TypeError。

在微信小程序中，由于底层实现不同，不会出现此问题。错误堆栈指向 chunk-vendors.js，这通常是 uni-app 编译后生成的公共文件，表明问题出在框架的跨平台兼容层。

解决方案：

  1. 确保观察的目标元素存在：在调用 uni.createIntersectionObserver(this) 前，确认对应的 DOM 元素已渲染。可在 onReady 生命周期或 nextTick 中延迟创建观察器。
    onReady() {
  this.$nextTick(() => {
    let observer = uni.createIntersectionObserver(this);
    // 配置并执行观察
  });
}
回到顶部