页面列表数据无限加载-基于eleement-plus实现

核心实现逻辑：使用elementPlus提供的 v-infinite-scroll 指令 监听是否满足触底条件 ，满足加载条件时让 页数参数加 一获取下一页数据，做新老数据拼接渲染

代码实现：

<div class="body" v-infinite-scroll="load" :infinite-scroll-disabled="disabled">

        <!-- 商品列表-->

        <GoodsItem v-for="goods in goosList" :key="goods.id" :goods="goods" />

</div>

// 获取基础列表数据渲染
const goosList = ref([]);
const reqData = ref({
  categoryId: route.params.id,
  page: 1,
  pageSize: 20,
  sortField: "publishTime",
});

// 加载更多
const disabled = ref(false);
const load = async () => {
  console.log("加载更多");
  // 获取下一页的数据
  reqData.value.page++;
  const res = await postSubCategoryAPI(reqData.value);
  // 新老数据交替
  goosList.value = [...goosList.value, ...res.result.items];
  // 加载完毕，停止监听
  if (res.result.items.length === 0) {
    disabled.value = true;
  }
};

效果图：无限加载数据