uni-app uni.createIntersectionObserver()

uni-app uni.createIntersectionObserver()

开发环境 版本号 项目创建方式
Windows 4.64 HBuilderX

示例代码：

<template>
<view class="test">
<view class="inser"></view>
</view>
</template> 

mounted() {
const ob = uni.createIntersectionObserver(this);
ob.relativeToViewport().observe(".inser",res => {
console.log("ob========",res);
})
}

如果将监听的元素换成.test ，无法触发监听

操作步骤：

<template>  
  <view class="test">  
    <view class="inser"></view>  
  </view>  
</template>  

mounted() {  
 const ob = uni.createIntersectionObserver(this);  
ob.relativeToViewport().observe(".inser",res => {  
    console.log("ob========",res);  
})  
}  

如果将监听的元素换成.test ，无法触发监听

预期结果：

将监听的元素换成.test依然能正常

实际结果：

.test无法触发观察者的监听

bug描述：

监听组件的根节点时，无法触发监听


更多关于uni-app uni.createIntersectionObserver()的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

感谢反馈，问题已复现，已加分
临时解决方案，替换 /Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/uni-app-plus/dist/view.umd.min.js 为附件文件

更多关于uni-app uni.createIntersectionObserver()的实战教程也可以访问 https://www.itying.com/category-93-b0.html


好的

4.71.2025061206-alpha 已修复此问题，可升级到此版本。

这是一个已知的uni-app IntersectionObserver的限制问题。监听根节点时确实无法触发回调，这是设计上的限制而非bug。

原因分析：

  1. IntersectionObserver需要相对参照物来计算交叉状态
  2. 当监听根节点时，由于没有外层参照物，无法计算交叉区域
  3. 根节点默认会填充整个视口，导致无法触发交叉变化

解决方案：

  1. 避免直接监听根节点，改为监听内部子元素
  2. 如果必须监听根节点，可以添加一个外层容器作为参照：
<view class="container">
  <view class="test">  
    <view class="inser"></view>  
  </view>
</view>
回到顶部