<div id="app">
  <ul id="data-list">
    <!-- 在这里展示数据 -->
  </ul>
</div>

new Vue({
  el: '#app',
  data: {
    dataList: [], // 存储加载的数据
    currentPage: 1, // 当前页数
    isLoading: false // 标记是否正在加载数据
  },
  mounted() {
    // 初始化时加载第一页数据
    this.loadMoreData();
    // 监听滚动事件
    window.addEventListener('scroll', this.handleScroll);
  },
  methods: {
    loadMoreData() {
      if (!this.isLoading) {
        this.isLoading = true;
        // 发起请求获取新数据
        // 例如使用axios发送Ajax请求
        axios.get('/api/data?page=' + this.currentPage)
          .then(response => {
            this.dataList = this.dataList.concat(response.data); // 追加新数据到列表
            this.currentPage++; // 增加页数
            this.isLoading = false; // 加载完毕，将isLoading设置为false
          })
          .catch(error => {
            console.error(error);
            this.isLoading = false; // 请求出错时，也要将isLoading设置为false
          });
      }
    },
    handleScroll() {
      // 检查是否滚动到页面底部
      const scrollHeight = document.documentElement.scrollHeight;
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      const clientHeight = document.documentElement.clientHeight;
      if (scrollTop + clientHeight >= scrollHeight - 10) {
        // 触发加载更多数据
        this.loadMoreData();
      }
    }
  }
});

npm install vue-infinite-loading

import Vue from 'vue';
import InfiniteLoading from 'vue-infinite-loading';

// 注册vue-infinite-loading组件
Vue.use(InfiniteLoading);​

<template>
  <div>
    <ul>
      <!-- 渲染列表数据 -->
      <li v-for="item in itemList" :key="item.id">{{ item.name }}</li>
    </ul>
    <!-- infinite-loading组件 -->
    <infinite-loading @infinite="loadMoreItems">
      <div slot="no-more">已加载全部数据</div>
    </infinite-loading>
  </div>
</template>

<script>
export default {
  data() {
    return {
      itemList: [], // 存储加载的列表数据
      currentPage: 1 // 当前页码
    };
  },
  methods: {
    loadMoreItems($state) {
      // 加载更多数据
      // 例如使用axios发送Ajax请求
      axios.get('/api/data?page=' + this.currentPage)
        .then(response => {
          const newDataList = response.data;
          // 判断是否还有更多数据
          if (newDataList.length > 0) {
            // 追加新数据到itemList中
            this.itemList = this.itemList.concat(newDataList);
            this.currentPage++;
            // 告诉插件加载成功
            $state.loaded();
          } else {
            // 所有数据加载完毕
            $state.complete();
          }
        })
        .catch(error => {
          console.error(error);
          // 告诉插件加载失败
          $state.error();
        });
    }
  }
};
</script>​

使用infinite-loading组件来实现无限滚动加载的功能。通过监听infinite事件，当滚动到加载更多的位置时，执行loadMoreItems方法来加载更多数据。在loadMoreItems方法中，通过Ajax请求获取数据，并根据返回结果追加数据到itemList数组中。根据数据是否已经加载完成，使用不同的插件状态方法（loaded()、complete()、error()）告知插件加载状态。

import infiniteScroll from 'vue3-infinite-scroll-better'
app.use(infiniteScroll).mount('#app')​

             <div
                  class="list-lis"
                  v-infinite-scroll="handleInfiniteOnLoad"
                  :infinite-scroll-immediate-check="false"
                  :infinite-scroll-disabled="scrollDisabled"
                  :infinite-scroll-watch-disabled="scrollDisabled"
                   :infinite-scroll-distance="20">
                    <a-list
                        size="small"
                        bordered
                        item-layout="horizontal"
                        :data-source="List"
                    >
                        <template #renderItem="{ item, index }">
                            <a-list-item>
                                <a-skeleton :title="false" :loading="item.loading" active>
                                    <a-list-item-meta :description="item.email">
                                        <template #title>
                                            <span>{{ item.nickname }}</span>
                                        </template>
                                    </a-list-item-meta>
                                    <div>
                                     //数据
                                    </div>
                                </a-skeleton>
                            </a-list-item>
                        </template>
                    </a-list>
                </div>​

setup(props, context) {
  const List= [] // 数据列表
  const listCount = 50
  const handleInfiniteOnLoad = () => {
    // 异步加载数据等逻辑
    if (scrollDisabled) {
      // 数据加载完毕
    } else {
      // 加载数据列表
    }
  }
  const scrollDisabled = computed(() => renderDataList.length >= listCount)
  return {
    scrollDisabled,
    renderDataList,
    handleInfiniteOnLoad
  }
}