new IntersectionObserver js方法描述步骤
实现逻辑:通过监视底部节点可视情况,获取新数据进行渲染,如果获取不到最新数据则显示暂无其他数据
new IntersectionObserver 是用于监视元素可见度,所以我们只需要监视数据下方的dom是否可见
import { type Ref, watchEffect, ref } from "vue"
//我用的ts,不需要可以删除
interface IntersectionObserverProps {
target: Ref<Element | null | undefined>
root?: Ref<any>
onIntersect: IntersectionObserverCallback
rootMargin?: string
threshold?: number | number[]
}
export function useIntersectionObserver({ target, root, onIntersect, rootMargin = "0px", threshold = 0.1 }: IntersectionObserverProps) {
let cleanup: Function//每次调用前先移除监听
const observer: Ref<Nullable<IntersectionObserver>> = ref(null)
const stopEffect = watchEffect(() => {
cleanup && cleanup()
observer.value = new IntersectionObserver(onIntersect, {
root: root ? root.value : null,//设置监视器的根节点,不传则默认为视口
rootMargin,//类似于 CSS 的 margin 属性。用来缩小或扩大 rootBounds,从而影响相交的触发。
threshold/*属性决定相交比例为多少时,触发回调函数。取值为 0 ~ 1,或者 0 ~ 1的数组。
当我们把 threshold 设置为 [0, 0.25, 0.5, 0.75, 1],
元素分别在 0%,25%,50%,75%,100% 可见时,触发回调函数。*/
})
const current = target.value//被监视的元素本身
current && observer.value.observe(current)// 开始观察某个目标元素
cleanup = () => {
if (observer.value) {
observer.value.disconnect()// 关闭监视器
target.value && observer.value.unobserve(target.value)// 停止观察某个目标元素
}
}
})
//将方法暴露出来外部也可使用
return {
observer,
stop: () => {
cleanup()
stopEffect()
}
}
}
不清楚方法配置项的可以看MDN Intersection Observer
组件中使用
将暂无其他数据的dom给到方法去监视
这里我只是简单演示方法,监视效果达后到可以自行更改ui和触底后的逻辑
html:
<div v-for='item in data' key='item' >{{item}}</div>
<div ref="empty">{{"暂无其他数据" }}</div>
js部分
const empty = ref(null)
// 默认在初始创建节点时会触发一次,因为初始没有数据节点会在视图中完整呈现,也可以让节点在有数据的时候再创建
const { stop, observer } = useIntersectionObserver({
target: empty,//最底部的dom
onIntersect: (entries: any[]) => {//isIntersecting:boolean 表示节点是否可见,intersectionRatio:number 表示节点可见度数值
const isIntersecting = entries[0].isIntersecting || entries[0].intersectionRatio
if (!isIntersecting) return
... //此处写要实现的逻辑
},
threshold: 0.1//为1 表示dom完整呈现
})
如果需要详细讲解可以看这两篇文章:
https://juejin.cn/post/6844903927419256846
https://juejin.cn/post/6950464500491354126#heading-9
也可以去MDN Intersection Observer 查看完整配置项和方法
vue基于组合式API提供的@vueuse/core插件内的useIntersectionObserver
安装
npm i @vueuse/core
使用
useIntersectionObserver其实就是方便了我们之前封装的那个步骤,如果想要基于这个二次封装也是可以的
// 封装一个通用的方法实现数据的懒加载
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'
export const useLazyData = (apiFn) => {
// target表示组件的最外层div元素
const target = ref(null)
// 懒加载接口返回的数据
const result = ref([])
// 监听组件是否进入可视区
const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
// 如果target对应的DOM进入可视区,那么该回调函数就触发
if (isIntersecting) {
// 被监听的DOM进入了可视区:此时调用接口获取数据;停止继续监听
stop()
... //此处写要实现的逻辑
}
})
// result表示接口懒加载获取的业务数据
// target表示被监听的DOM元素,需要在模板中被ref属性绑定
return { result, target }
}