这是我第一次使用 IntersectionObserver,我关注了这个文档 https://www.netguru.com/codestories/infinite-scroll-with-vue.js-and-intersection-observer
.但是因为这个错误我被阻止了
[Vue warn]: Error in mounted hook: "TypeError: Failed to construct 'IntersectionObserver': The provided value is not of type '(Element or Document)'"
这是我的触发组件
<template>
<span ref='trigger'></span>
</template>
<script>
export default {
props:{
options:{
type: Object,
default: () => ({
root: 0,
threshold: "0",
})
}
},
data(){
return{
observer : null
}
},
mounted(){
this.observer = new IntersectionObserver( entries => {
this.handleIntersect(entries[0]);
}, this.options);
this.observer.observe(this.$refs.trigger);
},
destroyed(){
this.observer.disconnect();
},
methods:{
handleIntersect(entry){
if (entry.isIntersecting) this.$emit("triggerIntersected");
}
}
}
</script>
我该如何解决这个问题?(谢谢)
最佳答案
您已更改 default
的 options
从:
default: () => {
return {
root: null,
threshold: "0"
};
}
至:
default: () => ({
root: 0,
threshold: "0"
})
但是如果我们查看
lib.dom.d.ts
,这是 IntersectionObserver 选项对象的接口(interface):interface IntersectionObserverInit {
root?: Element | null;
rootMargin?: string;
threshold?: number | number[];
}
当
root
是 null
或 undefined
, IntersectionObserver
默认为视口(viewport)元素。所以改回
null
它会起作用。
关于javascript - vue.js 中的 Intersection Observer 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61578205/