Vue实现滚动加载更多效果的示例代码

<template>
  <div class="color-squares" @scroll="handleScroll">
    <!-- 这里我使用的是一个数字并非是一个数组，如果使用的是数组的话可将size换成arr.slice(0,size)（arr是你的数组）; -->
    <div v-for="(item, index) in size" :key="index" class="square">
      {{ item }}
    </div>
    <!-- 末尾方式加载状态，这里我使用的时t-design（腾讯组件库） -->
    <t-loading :loading="loading" text="正在加载更多..." />
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
//总数据量
const total = ref(15);
//我们手动模拟分页效果,
const pageSize = ref(5);
const pageNum = ref(1);
const loading = ref(false);
//使用计算属性来更改size的值。通过滚动来更改pageNum（页码）。
const size = computed(() => {
  return pageNum.value * pageSize.value > total
    ? total
    : pageNum.value * pageSize.value;
});
//加载更多函数，注意里面的打印信息。
const loadMore = () => {
  if (pageNum.value * pageSize.value >= total.value) {
    loading.value = false;
    return;
  }

  loading.value = true;
  //请注意我
  console.log(1);
  // 模拟异步请求
  setTimeout(() => {
    pageNum.value++;
    loading.value = false;
  }, 1000); // 模拟网络延迟
};

const handleScroll = (event) => {
  const container = event.target;
  if (
    container.scrollTop + container.clientHeight >=
    container.scrollHeight - 5
  ) {
    loadMore();
  }
};
// 生命周期钩子
onMounted(() => {});
</script>

<style scoped>
.color-squares {
  height: 100vh;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 100px;
  width: 100%;
  gap: 10px;
  border: 1px solid #ccc;
}
.square {
  width: 200px;
  height: 200px;
  background-color: #ececec;
  text-align: center;
  line-height: 200px;
  border-radius: 8px;
  font-size: 24px;
  font-weight: bolder;
}
</style>

<script setup>
import { ref, onMounted, computed } from "vue";
//总数据量
const total = ref(15);
//我们手动模拟分页效果,
const pageSize = ref(5);
const pageNum = ref(1);
const loading = ref(false);
//使用计算属性来更改size的值。通过滚动来更改pageNum（页码）。
const size = computed(() => {
  return pageNum.value * pageSize.value > total
    ? total
    : pageNum.value * pageSize.value;
});
//加载更多函数，注意里面的打印信息。
const loadMore = () => {
  if (pageNum.value * pageSize.value >= total.value) {
    loading.value = false;
    return;
  }

  loading.value = true;
  //请注意我
  console.log(1);
  // 模拟异步请求
  setTimeout(() => {
    pageNum.value++;
    loading.value = false;
  }, 1000); // 模拟网络延迟
};
function debounce(fn, delay, immediate = false) {
  let timer;

  return function (...args) {
    const context = this;

    // 如果设置了 immediate，并且这是第一次触发，则立即执行目标函数
    if (immediate && !timer) {
      fn.apply(context, args);
    }

    // 清除之前的定时器
    if (timer) clearTimeout(timer);

    // 设置新的定时器
    timer = setTimeout(() => {
      if (!immediate) {
        fn.apply(context, args); // 如果没有立即执行，则在延迟后执行
      }
      timer = null; // 清空定时器标识符
    }, delay);
  };
}
const handleScroll = debounce((event) => {
  const container = event.target;
  if (
    container.scrollTop + container.clientHeight >=
    container.scrollHeight - 5
  ) {
    loadMore();
  }
}, 300);
// 生命周期钩子
onMounted(() => {});
</script>

<template>
  <div class="color-squares" max-height="500px" v-infinite-scroll="loadMore">
    <!-- 如果使用的是数组，可以将 size 换成 arr.slice(0, size) -->
    <div v-for="(item, index) in size" :key="index" class="square">
      {{ item }}
    </div>

    <!-- 末尾方式加载状态，这里我使用的时 t-design（腾讯组件库） -->
    <t-loading :loading="loading" text="正在加载更多..." />
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
//总数据量
const total = ref(15);
//我们手动模拟分页效果,
const pageSize = ref(5);
const pageNum = ref(1);
const loading = ref(false);
//使用计算属性来更改size的值。通过滚动来更改pageNum（页码）。
const size = computed(() => {
  return pageNum.value * pageSize.value > total
    ? total
    : pageNum.value * pageSize.value;
});
//加载更多函数，注意里面的打印信息。
const loadMore = () => {
  if (pageNum.value * pageSize.value >= total.value) {
    loading.value = false;
    return;
  }
  loading.value = true;
  //请注意我
  console.log(1);
  // 模拟异步请求
  setTimeout(() => {
    pageNum.value++;
    loading.value = false;
  }, 1000); // 模拟网络延迟
};
</script>

<style scoped>
.color-squares {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 100px;
  width: 100%;
  gap: 10px;
  border: 1px solid #ccc; /* 可选：添加边框以便更清晰地看到滚动容器 */
}
.square {
  width: 200px;
  height: 200px;
  background-color: #ececec;
  text-align: center;
  line-height: 200px;
  border-radius: 8px;
  font-size: 24px;
  font-weight: bolder;
}
</style>