1.组件数据懒加载–到可视区域再发请求(vue3)
关键:如何判断组件进入视口—useIntersectionObserver
技术方案:
我们可以使用 @vueuse/core
中的 useIntersectionObserver
来实现监听组件进入可视区域行为,需要配合vue3.0的组合API的方式才能实现
链接:https://vueuse.org/core/useIntersectionObserver/
步骤:
-
1. 通过ref获取要监控的元素或组件
-
2. 调用useIntersectionObserver(要监控的元素DOM对象或组件实例, 监控的回调函数)=》多次触发
-
说明:监控函数执行完,可以解构出stop方法=》停止监控
const { stop } = useIntersectionObserver(
target,
([{ isIntersecting }], observerElement) => {
targetIsVisible.value = isIntersecting
}
)
/*
1.stop 一个可执行的函数用来停止监听行为
2.target 一个由ref api调用之后形成的RefImpl对象 也可以是一个dom对象
3.isIntersecting 一个类型为布尔值的数据 当被监听元素进入视口区域时为true,离开视口区域时为false
特别注意: 对于目标target是否进入视口区域的监听会一直进行不会只监听一次
*/
const hot = ref(null)
const { stop } = useIntersectionObserver(
hot,
([{ isIntersecting }]) => {
console.log('监控回调函数:', isIntersecting)
if (isIntersecting) {
console.log('进入可视区了,发请求')
// 按需
getGoods()
// 注意:发送完,立即关闭监听=》避免多次发送
// 关闭监控
stop()
}
}
)
2.吸顶效果实现
关键—获取页面滚动高度—所用函数:useWindowScroll
import { useWindowScroll } from '@vueuse/core'
setup () {
// y表示具体顶部的滚动距离 会动态更新
const { y } = useWindowScroll()
return { y }
}