因为首页加载的内容太多了,就打上动态加载模块的东西,就想着能不能利用这个东西去做动态加载
之前看到文档里面有写,如果在组件内部的话就使用this.createIntersectionObserver去创建这个observer,但是发现这样在小程序的自定义组件里面还是无法observer。
因为这个如果换成wx.createIntersectionObserver在Page页面是可以监听得到的,就想问下是哪里的写法写错了么。
另外想问下这种写法是有办法监听父级的viewPort的明天,还是说只能监听组件内部的
代码片段已经在上面了
index.wxml
<view class="container">
<C></C>
</view>
C.wxml
<scroll-view class="C" scroll-y="{{true}}">
<view class="header"></view>
<view class="observer"></view>
<view class="content">C</view>
</scroll-view>
C.js
Component({
attached () {
let observer = this.createIntersectionObserver( {
thresholds: [0.2, 0.5]
}).relativeTo('.C').relativeToViewport()
observer.observe('.observer', (res) => {
console.log(res)
})
console.log(observer)
console.log(this)
}
})
C.wxss
.C {
height: 1000rpx;
}
.content {
height: 2000rpx;
}
.C-Observer {
height: 10rpx;
}
.header {
height: 1000rpx;
}
VM317:1 thirdScriptError
this.createIntersectionObserver(...).relativeToViewport(...).observer is not a function; [Component] Data Observer Error
我也想知道如何解决组件内报错的原因:
相关代码:
this.createIntersectionObserver() .relativeToViewport() .observer(".wrapper", (result) => { console.log(result); if (result.intersectionRatio > 0) { console.log("懒加载组件进入可视区域"); } });
ready里面做
https://developers.weixin.qq.com/s/uu5U0NmN7U3p
要传this,不能relate多个?ready
谢谢,那样的话这个问题其实应该是跟我用了attached有关系,因为在attached的时候组件布局还未完成,节点信息还拿不到
嗯,看起来像是这个原因
但是在组件里面,好像没有办法知道组件自己是否已经进入页面可视区域,组件只能监听组件里面情况
咦。。我的可以呢
有个代码片段看下吗~