vue3列表每次滚动下拉显示加载动画

直接上代码,非常简单

<template>
  <div class="app" v-loading="loading">
    <div class="list-container" ref="listContainer" @scroll="handleScroll">
      <ul>
        <li v-for="item in visibleList" :key="item.id">{{ item.name }}</li>
      </ul>
      <div v-if="!hasMore" class="no-more-data">已没有更多数据</div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
const list = ref([
  { id: 1, name: "Item 1" },
  { id: 2, name: "Item 2" },
  { id: 3, name: "Item 3" },
  { id: 4, name: "Item 4" },
  { id: 4, name: "Item 5" },
  { id: 4, name: "Item 6" },
  { id: 4, name: "Item 7" },
  { id: 4, name: "Item 8" },
  { id: 4, name: "Item 9" },
  { id: 4, name: "Item 10" },
  { id: 4, name: "Item 11" },
  { id: 4, name: "Item 12" },
  { id: 4, name: "Item 12" },
  { id: 4, name: "Item 12" },
  // ... 添加更多初始数据
]);
const visibleList = ref([]);
const loading = ref(false);
const listContainer = ref(null);
const page = ref(1);
const pageSize = 4; // 设置每页显示的数据数量
const hasMore = ref(true); // 判断是否还有更多数据

const loadData = () => {
  loading.value = true;
  setTimeout(() => {
    const start = (page.value - 1) * pageSize;
    const end = start + pageSize;
    visibleList.value = visibleList.value.concat(list.value.slice(start, end));

    page.value += 1;
    loading.value = false;

    if (end >= list.value.length) {
      hasMore.value = false;
    }
  }, 1000);
};

const handleScroll = () => {
  const container = listContainer.value;
  const scrollHeight = container.scrollHeight;
  const scrollTop = container.scrollTop;
  const clientHeight = container.clientHeight;
  if (
    scrollHeight - scrollTop - clientHeight <= 10 &&
    !loading.value &&
    hasMore.value
  ) {
    loadData();
  }
};

onMounted(() => {
  const container = listContainer.value;
  handleScroll();
  loadData();
});
</script>

<style>
.list-container {
  height: 100%; /* 设置容器的高度，使得内容超过容器高度时可以滚动 */
  overflow-y: auto; /* 设置垂直方向滚动 */
}
.app {
  height: 100px; /* 设置容器的高度，使得内容超过容器高度时可以滚动 */
}

.loading-animation {
  text-align: center;
  padding: 10px;
}

.no-more-data {
  text-align: center;
  padding: 10px;
  color: gray;
}
</style>

element-plus表格的滚动动画

<template>
  <div class="app" v-loading="loading">
    <div class="tableData-container" ref="listContainer" @scroll="handleScroll">
      <el-table :data="tableData" height="250" style="width: 100%">
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
      </el-table>
      <div v-if="!hasMore" class="no-more-data">已没有更多数据</div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-08",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-06",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-07",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-07",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-07",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-07",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-07",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-07",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-07",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-07",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-07",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-07",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-07",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-07",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-07",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];
const visibleList = ref([]);
const loading = ref(false);
const listContainer = ref(null);
const page = ref(1);
const pageSize = 4; // 设置每页显示的数据数量
const hasMore = ref(true); // 判断是否还有更多数据

const loadData = () => {
  loading.value = true;
  setTimeout(() => {
    const start = (page.value - 1) * pageSize;
    const end = start + pageSize;
    visibleList.value = visibleList.value.concat(
      tableData.value?.slice(start, end)
    );

    page.value += 1;
    loading.value = false;

    if (end >= tableData.value?.length) {
      hasMore.value = false;
    }
  }, 1000);
};

const handleScroll = () => {
  const container = listContainer.value;
  const scrollHeight = container.scrollHeight;
  const scrollTop = container.scrollTop;
  const clientHeight = container.clientHeight;
  if (
    scrollHeight - scrollTop - clientHeight <= 10 &&
    !loading.value &&
    hasMore.value
  ) {
    loadData();
  }
};

onMounted(() => {
  const container = listContainer.value;
  handleScroll();
  loadData();
});
</script>

<style>
.tableData-container {
  height: 100%; /* 设置容器的高度，使得内容超过容器高度时可以滚动 */
  overflow-y: auto; /* 设置垂直方向滚动 */
}
.app {
  height: 100px; /* 设置容器的高度，使得内容超过容器高度时可以滚动 */
}

.loading-animation {
  text-align: center;
  padding: 10px;
}

.no-more-data {
  text-align: center;
  padding: 10px;
  color: gray;
}
</style>