下载依赖

npm install vue3-infinite-scroll-better --save

在main.ts中引入

import infiniteScroll from 'vue3-infinite-scroll-better'
App.use(infiniteScroll)

API

指令

使用

v-infinite-scroll放在最后

<template>
  <div>
    <div class="fa" v-for="(i, index) in datas" :key="i.tid">
      <p class="son">
        <span
          >用户：{{ i.uid }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
            i.classify
          }}</span
        >
      </p>

      <p class="title" v-html="i.title"></p>
      <span class="cover" v-html="i.cover"></span>
    </div>
    <!-- 滚轮下滑加载 -->

    <div
      class="list-lis"
      v-infinite-scroll="handleInfiniteOnLoad"
      :infinite-scroll-throttle-delay="300"
      :infinite-scroll-immediate-check="false"
      :infinite-scroll-disabled="busy"
      infinite-scroll-watch-disabled="busy"
      :infinite-scroll-distance="30"
    >
      <ul>
        <div class="fa" v-for="(i, index) in renderDataList" :key="i.tid">
          <p class="son">
            <span
              >用户：{{ i.uid }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
                i.classify
              }}</span
            >
          </p>

          <p class="title" v-html="i.title"></p>
          <span class="cover" v-html="i.cover"></span>
        </div>
        <div v-if="busy">数据加载完毕</div>
      </ul>
    </div>
  </div>
</template>

注：一开始需要将infinite-scroll-disabled设为false，以便于触发滚动时间，在执行回调函数的时候需要将infinite-scroll-disabled设为true，禁止滑动事件，防止一直触发事件.如果还有数据没加载万就将infinite-scroll-disabled设为false，如果已经加载完，继续设为true.

infinite-scroll-distance代表距离底部的多少像素值触发回调函数

infinite-scroll-throttle-delay代表循环检测滑轮是否到达临界值的间隔时间

<script setup lang="ts">
import { ElMessage } from "element-plus";

import {
  onMounted,
  ref,
  computed,
  reactive,
  getCurrentInstance,
  onUnmounted,
} from "vue";
let { proxy }: any = getCurrentInstance();
let datas: any = ref("");
let busy: any = ref(false);
onMounted(async () => {
  let re = await proxy.$axios.get("/gain");

  listCount = re.data.zs;
  wCount = re.data.info[9].tid;
  datas.value = re.data.info;
});
//清除定时器
onUnmounted(() => {
  if (timer) {
    window.clearTimeout(timer);
    timer = null;
  }
});

//滚轮下滑加载
let renderDataList: any = []; // 数据列表
var timer: any = "";
var listCount: any = 100; //记录一共有多少文章
var wCount: any = 0; //记录当前加载到第几篇文章
const handleInfiniteOnLoad = () => {
  // 异步加载数据等逻辑
  busy.value = true;
  //防止用户一直下滑，用于防抖
  timer = window.setTimeout(async () => {
    let re = await proxy.$axios.get("/jz", { params: { sj: wCount } });
    //还有更多数据
    if (re.data.code == 2000) {
      // 加载数据列表
      renderDataList = re.data.info;
      wCount = re.data.zs;
      busy.value = false;
      console.log(renderDataList, wCount, busy.value);
    } 
    else
     //没有更多数据
    if (re.data.code == 4000) {
      busy.value = true;
      ElMessage({
        showClose: true,
        message: re.data.info,
        type: "warning",
      });
    }
  }, 1000);
};
</script>