dcloudio / dcloudio/uni-app

createIntersectionObserver监听数据不准确

Open
#1,808 1 comment 0 reactions 0 assignees View on GitHub
不明确复现步骤、未提供复现工程
Dominant language
JavaScript
Stars
41.6k
Forks
3.7k
Avg merge
7h 6m
Merged PRs (30d)
6

Description

**问题描述**
使用uni-app来检测组件信息时,我看了[createIntersectionObserver](https://uniapp.dcloud.io/api/ui/intersection-observer?id=%e4%bb%a3%e7%a0%81%e7%a4%ba%e4%be%8b)的接口和示例。我发现监听到的数据不准确。可以在Uniapp中直接跑示例代码,或者按照下列步骤复现问题。

**复现步骤**
1. HBuilderX新建项目,选择【uni-app】- 【选择模板】- 【Hello uni-app】
2. 运行项目,点击【接口】-【界面】-【节点布局交互状态】,小球滚动到顶部至消失状态,然后**慢慢**向下滚动,即使小球可见了,依然显示的是**小球消失状态**。

**预期结果**
不论滚动速度快慢,都能正常检测到小球和scrollView的交互状态。

**实际结果**
查看[BUG演示gif图](https://raw.githubusercontent.com/runryan/youdaonote_resources/master/uni-bug.gif)

```
相交监听结果: {"intersectionRatio":0,"intersectionRect":{"bottom":421,"height":0,"left":395,"right":684,"top":421,"width":289},"boundingClientRect":{"bottom":421,"height":288,"left":395.5,"right":683.5,"top":133,"width":288},"relativeRect":{"bottom":996,"height":576,"left":43,"right":1036,"top":420,"width":993},"time":1592536478828,"dataset":{},"id":""} at pages/API/intersection-observer/intersection-observer.vue:29
```

从打印的日志信息看,明显小球在屏幕中可见,但是`intersectionRatio`的值是0,`intersectionRect`的`height`值还是0。我猜测错误的原因就在这里。

**系统信息:**
- 发行平台: [H5平台、5+ App]
- 操作系统: [ iOS 13.5、]
- HBuilderX版本: 2.7.9.20200527
- uni-app版本: 2.7.9.20200527
- 设备信息: [iPhoneSE 模拟器、Chrome浏览器 版本 80.0.3987.132]

**补充信息**
`createIntersectionObserver`,`observe`方法没有正确计算出两个节点相交范围。

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.