在使用uni.createIntersectionObserver观察指定元素是否出现在屏幕中时,实现效果再小程序端可以正常生效,在h5端提示xxx is not found. Intersection observer will not trigger.
<view class="sImage">
<image :src="src" :mode="mode"></image>
</view>
let intersectionObserver = null;
export default {
name: "sImage",
props: {
src: {
type: String,
default: () => ''
},
mode: {
type: String,
default: () => 'aspectFill'
},
bottomDistance: { // px
type: Number,
default: () => 50
}
},
data() {
return {
};
},
mounted() {
this.init()
},
beforeUnmount() {
intersectionObserver?.disconnect()
},
methods: {
init() {
intersectionObserver = uni.createIntersectionObserver(this);
intersectionObserver.relativeToViewport({
bottom: 50
}).observe('.sImage', (res) => {
console.log('observe:', res)
})
}
}
}
以下分别为h5和小程序执行的结果
![](http://img-cdn-tc.dcloud.net.cn/uploads/questions/20230819/442228c381b88513d58c3335e3db0c5b.png)