vue3中实现滚动到底发送请求获取数据并加载数据

这个项目是vue3的，用了axios请求，element puls插件。

有后端java请求的数据。

代码如下：

<template>
  <el-row class="title">
    <el-col :span="24"> <h2>全部水果</h2></el-col>
  </el-row>
  <div class="content">
    <el-row :gutter="30">
      <el-col v-for="(item, index) in shopList" :key="item" :span="6">
        <el-card :body-style="{ padding: '0px' }">
          <el-image :src="item.picture" class="image" fit="cover" />
          <div class="item-title">
            <span>{{ item.name }}</span>
          </div>
        </el-card>
        <router-link :to="details + item.id">
          <div class="details">
            <div class="list">
              <span>商品:{{ item.name }}</span>
              <span>价格:￥{{ item.price }}</span>
            </div>
          </div>
        </router-link>
      </el-col>
      <!-- 加载完成显示 -->
      <el-col class="tips" v-if="tips"> 已显示全部商品 </el-col>
    </el-row>
  </div>
</template>

JS：

<script setup>
import { ref, reactive, onMounted } from "vue";
// API
import { shopApi } from "@/api/api";

// 跳转details
const details = "details?id=";

onMounted(async () => {
  await getData();
  // →滚动条事件
  window.addEventListener("scroll", load);
});
// 水果数据
const pagination = reactive({
  current: 1,
  size: 8,
});
// 请求后数据
const shopList = ref();
const tips = ref(false);
// 封装请求
const getData = async () => {
  const parameter = pagination.current + "/" + pagination.size;
  const res = await shopApi(parameter);
  const data = res.data.result;
  if (res.success) {
    shopList.value = data.records;
  } else {
    ElMessage.error(res.message);
  }
  const total = data.total;
  const length = data.records.length;
  if (length % 4 != 0 || total == length) {
    tips.value = true;
  }
};
// 滚到加载事件
const load = async (e) => {
  const scrollTop = document.documentElement.scrollTop;
  const clientHeight = document.body.clientHeight;
  const totalHeight = scrollTop + clientHeight - 326;
  const cosnt = pagination.size / 4;
  if (totalHeight > 324 * cosnt) {
    pagination.size += 4;
    await getData();
  }
};
</script>

CSS（scss）：

<style lang="scss" scoped>
.el-carousel__item img {
  line-height: 300px;
  margin: 0;
  .banner-img img {
    height: 100%;
  }
}
// 水果展示
.title {
  margin-top: 20px;
  text-align: center;
  font-size: 28px;
}
.content {
  width: 1040px;
  margin: 20px auto;
  .el-col {
    margin-bottom: 20px;
    position: relative;
  }
  .details {
    position: absolute;
    top: 0;
    width: 236px;
    height: 100%;
    background-color: #000;
    border-radius: 4px;
    transition: all 0.5s;
    opacity: 0;
    .list {
      color: #fff;
      padding: 12px;
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100%;
      span {
        display: block;
        font-size: 24px;
      }
    }
  }
  .details:hover {
    opacity: 0.6;
  }
  .image {
    height: 250px;
    img {
      height: 100%;
    }
  }
  .item-title {
    padding: 14px;
    border-top: 1px solid #eee;
    text-align: center;
    width: 100%;
    display: block;
  }
}
.tips {
  margin-top: 20px;
  text-align: center;
  color: #999;
}
</style>

axios请求

// http.js 封装了   BASE_URL是url请求地址
const http = {
  get(url) {
    return service
      .get(BASE_URL + url)
      .then((res) => {
        return res.data;
      })
      .catch((err) => {
        return err;
      });
  },
}

// api.js
import http from "./http.js";
// 商品管理
export const shopApi = (parameter) => http.get("/shop/page/" + parameter);