createIntersectionObserver().relativeToViewport().observe() 问题 about kbone HOT 9 CLOSED

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

from kbone.

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

from kbone.

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

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

from kbone.

好的 ，感谢！
不带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();
}
);
});
});

from kbone.

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

from kbone.

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

from kbone.

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

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

from kbone.

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

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

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

from kbone.

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

改为

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

即可。

from kbone.