记录鼠标在页面的滚动停止位置
组件的生命周期可以在lifetimes字段进行声明
我们需要了解某个模块是否进入了"视口",即用户能不能看到它,这里需要用到IntersectionObserver API,可以自动观察元素是否可见
lifetimes: {
ready() {
// * 记录滑动停止位置
wx.nextTick(() => {
this._intersectionObserver = this.createIntersectionObserver({
thresholds: [0.5],
// initialRatio: 0.8,
observeAll: true
})
.relativeToViewport({
// top: 0,
bottom: 0,
// left: 0,
// right: 0
})
this._intersectionObserver.observe('.burry-point', (res) => {
if (res.intersectionRatio >= 0.5) {
// console.log(res.dataset.burryPoint);
// console.log(res)
// console.log(res.intersectionRatio)
this.data.exitlocation = res.dataset.burryPoint
}
})
})
}
},
- intersectionRatio: 目标元素的可见比例,即intersectionRect占boundingClientRect的比例,完全可见时为1,完全不可见时小于等于0
- threshold参数,用来设置当change.intersectionRatio属性,达到指定值时,也会触发回调函数。threshold的默认值是:[0],即只有在开始进入,或者是完全离开视图区域时,才会触发。