uni-app 关于chunk-vendors.js的报错bug

uni-app 关于chunk-vendors.js的报错bug

产品分类 开发环境 版本号 项目创建方式
uniapp/App Windows win10 HBuilderX
3.2.0
Android Android Android 11
华为 手机机型 红米note 7 rop

产品分类：uniapp/App
PC开发环境操作系统：Windows
PC开发环境操作系统版本号：win10
HBuilderX类型：正式
HBuilderX版本号：3.2.0
手机系统：Android
手机系统版本号：Android 11
手机厂商：华为
手机机型：红米note 7 rop
页面类型：vue
打包方式：云端
项目创建方式：HBuilderX

操作步骤：

  1. 监听的元素被删除
  2. 更新代码时，页面也会自动刷新，刷新之后也会报错
    当然最理想的应该是，我们自己的代码逻辑删除元素时，使用observer.disconnect()取消元素的监听。
    不过我建议官方改一下chunk-vendors.js的代码，执行时判断bottom !== null

预期结果：

  • 不会有日志报错

实际结果：

  • 有日志报错

bug描述：

在使用uni.createIntersectionObserver时。当监听多个元素，元素被删除，控制台会报错

observer = uni.createIntersectionObserver(this,{observeAll: true});  
observer.observe('.lazy', (res) => {  
    if(res && res.intersectionRatio > 0){//发现有时候intersectionRatio等于undefined的  
        fn(res.dataset)  
    }  
});

更多关于uni-app 关于chunk-vendors.js的报错bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 关于chunk-vendors.js的报错bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个典型的IntersectionObserver监听已销毁DOM元素导致的报错问题。

当使用observeAll: true参数监听多个元素时，如果其中某些元素在观察期间被移除（比如列表项删除、条件渲染变化等），而观察器仍在尝试计算这些已不存在元素的位置信息，就会触发Cannot read property 'bottom' of null这类错误。

你的解决方案方向是正确的：

  1. 最佳实践：在删除元素前调用observer.disconnect()取消监听，或在组件/页面销毁时清理观察器。

  2. 代码层面的修复：可以在监听回调中添加更严格的空值检查：

observer.observe('.lazy', (res) => {
    if(res && res.intersectionRatio !== undefined && res.intersectionRatio > 0){
        fn(res.dataset)
    }
});
回到顶部