百度搜了几篇懒加载,都写的不详细,摸索了下,写篇博客记录下
需求是这样的,分页加载改成滚动到最后再加载,因为组件是自己写的,翻了下组件库,没有这个功能,就自己写一个
首先在hooks里面写一个ts文件,我这取名叫做use-lazy-data.ts
import { useIntersectionObserver } from '@vueuse/core';
import { ref } from 'vue';
// 数据懒加载函数
export const useLazyData = () => {
const target = ref(null);
const isLazy = ref(false);
const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
if (isIntersecting) {
// 不注释代码,函数只能触发一次
// stop();
isLazy.value = true;
}
});
return {
target,
isLazy,
};
};
然后在组件vue文件里面引入
<template>
<div v-for="item in list" :key="item.id" @click="onSelect(item)">
XXXX具体代码不贴了
</div>
<div v-if="list.length > 9" ref="target" ></div>
</template>
<script setup lang="ts">
import { watch } from 'vue';
import { useLazyData } from './hooks/use-lazy-data';
const { target, isLazy } = useLazyData();
watch(
() => isLazy.value,
() => {
if (isLazy.value) {
//如果触发了懒加载,下面是具体实现
//比如调用函数更新增加list列表数据,具体代码不写了
更新数据函数();
isLazy.value = false;
}
}
);
</script>
下面讲解一下,如果浏览器没有加载到ref=target的div,不会触发ts文件里面的useIntersectionObserver函数。
当滚动条下拉,浏览器显示target这个div的时候,触发函数,然后改变isLazy的值,我们同时也在监听isLazy属性,当监听到变化的时候,就比如滚动条拉到最下面了,需要加载新的数据的时候,触发我们的 “更新数据函数”,然后重新调用接口获取新的list数据。
如果只想触发一次,就把ts文件里面的stop();去掉注释即可