当前位置：首页 > news >正文

vue3数据懒加载无限滚动加载分页列表

news 来源：原创 2024/5/10 17:09:59

需求：滚动条下拉，分页请求列表数据。

实现方法一：

如果项目用到了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