需求场景:
观察子组件在父组件是否可视,父组件只是页面的一个区域,并非是全屏的。现在需要知道子组件在父组件的相交状态
父组件
```
<view class="f">
<view class="b1"></view>
<observer></observer>
</view>
```
observer 组件
```
<view class="b2"></view>
```
同样都是观察子组件在父组件的情况,如果观察的行为写在父组件的话,这个b1是可以被触发的,可以看到b1与父组件相交
```
// 父组件
createIntersectionObserver.relativeTo('.f').observer('.b1', () =>{ console.log(aaaa)})
```
但是在子组件去完成观察监听的话,这个行为就无法被触发了
```
// 子组件
createIntersectionObserver.relativeTo('.f').observer('.b2', () =>{ console.log(aaaa)})
```
是因为什么原因造成的呢,子组件不允许relativeTo父组件的元素吗?还是只能用relativeToViewport?
如果要做一个图片lazy-load的话,好像就没的解决了,我们目前的解决办法是在父组件对data做一个forEach做若干个监听,
但是感觉这样很不合理,希望交给子组件来做这个监听的行为
代码片段在这里:
https://developers.weixin.qq.com/s/wkoNcYmG7wco
IntersectionObserver 的选择器限制只能选择本组件内的节点(这和 SelectorQuery 的限制一样)。