收藏
回答

createIntersectionObserver无法监听父组件区域?

需求场景:

观察子组件在父组件是否可视,父组件只是页面的一个区域,并非是全屏的。现在需要知道子组件在父组件的相交状态

父组件

```

<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


回答关注问题邀请回答
收藏

1 个回答

  • LastLeaf
    LastLeaf
    2019-11-25

    IntersectionObserver 的选择器限制只能选择本组件内的节点(这和 SelectorQuery 的限制一样)。

    2019-11-25
    有用
    回复 5
    • 山间野橘子
      山间野橘子
      2020-07-08
      父组件 也 无法选择 子组件的节点吗?
      2020-07-08
      回复
    • LastLeaf
      LastLeaf
      2020-07-08回复山间野橘子
      默认选不到。但是你还是可以像 SelectorQuery 那样使用 >>> 选择器的。
      2020-07-08
      回复
    • 山间野橘子
      山间野橘子
      2020-07-08
      好的 感谢
      2020-07-08
      回复
    • ThenMorning
      ThenMorning
      2021-05-24回复LastLeaf
      那2个同层级的自定义组件监听相交只能放在他们的父组件里面做么
      2021-05-24
      回复
    • ZwyOo
      ZwyOo
      2022-01-26回复LastLeaf
      用了/deep/ 依然选不到 在父组件使用这个方法
      2022-01-26
      回复
登录 后发表内容
问题标签