需求：滚动条下拉，分页请求列表数据。
实现方法一：
如果项目用到了element-plus，那就直接可以用Infinite Scroll组件实现。
在要实现滚动加载的列表上上添加v-infinite-scroll，并赋值相应的加载方法，可实现滚动到底部时自动执行加载方法。
代码如下：
<template>
<ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
<li v-for="i in count" :key="i" class="infinite-list-item">{
{
i }}</li>
</ul>
</template>
<script lang="ts" setup>
import {
ref } from 'vue'
const count = ref(0)
const load = () => {
count.value += 2
}
</script>
实现方法二：
1、在src目录下新建一个文件夹hooks（用来存放hook文件），在hooks下新建一个文件use-lazy-data.js（如果用到ts，则用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,
};
};
2、在需要用的vue文件中引入：
<template>
<div class="content_box">
<div v-for="(a, index) in templateList" :key="index">列表数据</div>
<div v-if="templateList.length >= pageSize" ref="target"></div>
</div>
</template>
<script setup>
import {
ref, watch, onMounted } from "vue";
import {
digitalTemplate } from "@/api/api";
import {
useLazyData } from "../../hooks/use-lazy-data";
let templateList = ref([]) //列表数据
let pageNum = ref(1); //当前页数
let pageSize = ref(20); //每页请求数据个数
let totalCount = ref(0); //数据总数
// 滚动条滚动时懒加载列表
const {
target, isLazy } = useLazyData();
watch(
() => isLazy.value,
() => {
if (isLazy.value) {
//如果触发了懒加载，调用函数更新增加list列表数据。根据自己业务写代码逻辑
if (templateList.value.length >= totalCount.value) {
return;
}
pageNum.value = pageNum.value + 1;
getTemplateList();
isLazy.value = false;
}
}
);
// 获取数据列表
function getTemplateList() {
let data = {
pageNum: pageNum.value,
pageSize: pageSize.value,
};
//请求接口
digitalTemplate(data).then((res) => {
if (res.data.list && res.data.list.length > 0) {
totalCount.value = res.data.pageInfo.totalCount;
if (pageNum.value == 1) {
templateList.value = res.data.list;
} else {
templateList.value = templateList.value.concat(res.data.list);
}
} else if (pageNum.value == 1) {
console.log("暂无数据");
}
});
}
onMounted(async () => {
getTemplateList();
});
</script>
注意：
如果浏览器没有加载到ref=target的div，不会触发js文件里面的useIntersectionObserver函数。
当滚动条下拉，浏览器显示target这个div的时候，触发函数，然后改变isLazy的值，
我们同时也在监听isLazy属性，当监听到变化的时候，就比如滚动条拉到最下面了，需要加载新的数据的时候，触发 “更新数据函数”，然后重新调用接口获取新的list数据。
如果只想触发一次，就把js文件里面的stop();去掉注释即可
参考博客：https://blog.csdn.net/wnk1997/article/details/128954370