createIntersectionObserver().relativeToViewport().observe() 问题

[1026203093]

为什么返回的都是intersectionRatio的值1呢

[JuneAndGreen]

看你代码，这里走的就是浏览器的 IntersectionObserver，你这里已经监测到与视窗相交的节点刚好都在视窗内吧。你可以让列表超出视窗，然后滚动一下试试看。

[1026203093]

这个页面有7张图片 一屏展示的话 最多显示2张图片 因为每一张图片高度498px，而且img_item高度设置的就是498，按道理一屏绝对显示不了这么多图片，但是已进入页面 就会打印7次 每一次都是大于0
我在H5使用 IntersectionObserver Api是可以实现的 进入页面只加载两个图片 但是判断条件不是这个字段 而是isIntersecting

[JuneAndGreen]

https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createIntersectionObserver.html

同时监听多个图片的话，带上这个参数试试，而且只需要创建一次 intersectionObserver 就行。如果你要一张一张图片来监听，那么用不同的 class 来区分不同图片，这里不带 observeAll 参数的话会走 querySelector 接口，那只会找符合 selector 的第一个节点。

[1026203093]

好的 ，感谢！
不带observerAll 的话 一张图片一张图片的监听确实可以实现，但是设置observeAll还是不行的
带observeAll代码如下：

 //   无法进入debugger ,控制台就抛出了错误 ，不知道是不是我API使用的不对还是没有获取到这个实例 错误如下：
 //   [Vue warn]: Error in nextTick: "TypeError: Converting circular structure to JSON
 //  --> starting at object with constructor 'Object'
 //  --- property '_renderProxy' closes the circle"
 // let _this = this
  // this.observer = window.$$createIntersectionObserver(this,{observeAll: true});
  // this.$nextTick(()=>{
  //   _this.observer.relativeToViewport({ bottom: 100 }).observe(".h5-body >>> .img_item", res => {
  //     debugger 
  //     if (res.intersectionRatio > 0) {
  //       const lazyLoadImage = res.target;
  //       lazyLoadImage.src = lazyLoadImage.dataset?.src;
  //       _this.observer.unobserve(lazyLoadImage);
  //     }
  //   })
  // });

不带的代码如下：
let _this = this;
this.$nextTick(() => {
_this.list.forEach((item,index) => {
let ob = window.$$createIntersectionObserver();
ob.relativeToViewport({ bottom: 100 }).observe(
.h5-body >>> .img_item${index},
res => {
const { intersectionRatio } = res;
console.log(当前第${index+1}张图片，intersectionRatio值为${intersectionRatio})
if (intersectionRatio > 0) if (item.url === item.dataUrl) return;
_this.$set(item, "url", item.dataUrl);
_this.observer = ob;
_this.clareOb();
}
);
});
});

[JuneAndGreen]

在你打 debugger 的地方 console 一下，是没有回调，还是回调不正确？

[1026203093]

没有进行回调 执行observer.relativeToViewport().observe()完后 没有进入回调函数 即没有进入if判断

[JuneAndGreen]

没有进行回调 执行observer.relativeToViewport().observe()完后 没有进入回调函数 即没有进入if判断

那感觉不太合理，能否精简一个 demo 给我调试一下？

[1026203093]

没有进行回调 执行observer.relativeToViewport().observe()完后 没有进入回调函数 即没有进入if判断

那感觉不太合理，能否精简一个 demo 给我调试一下？

已经发给你了 那个微信号了 有时间您看下

[JuneAndGreen]

window.$$createIntersectionObserver(this,{observeAll: true})

改为

window.$$createIntersectionObserver({observeAll: true})

即可。