<template>
  <div class="color-squares" @scroll="handleScroll">
    <!-- 這里我使用的是一個(gè)數(shù)字并非是一個(gè)數(shù)組，如果使用的是數(shù)組的話可將size換成arr.slice(0,size)（arr是你的數(shù)組）; -->
    <div v-for="(item, index) in size" :key="index" class="square">
      {{ item }}
    </div>
    <!-- 末尾方式加載狀態(tài)，這里我使用的時(shí)t-design（騰訊組件庫） -->
    <t-loading :loading="loading" text="正在加載更多..." />
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
//總數(shù)據(jù)量
const total = ref(15);
//我們手動模擬分頁效果,
const pageSize = ref(5);
const pageNum = ref(1);
const loading = ref(false);
//使用計(jì)算屬性來更改size的值。通過滾動來更改pageNum（頁碼）。
const size = computed(() => {
  return pageNum.value * pageSize.value > total
    ? total
    : pageNum.value * pageSize.value;
});
//加載更多函數(shù)，注意里面的打印信息。
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); // 模擬網(wǎng)絡(luò)延遲
};

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";
//總數(shù)據(jù)量
const total = ref(15);
//我們手動模擬分頁效果,
const pageSize = ref(5);
const pageNum = ref(1);
const loading = ref(false);
//使用計(jì)算屬性來更改size的值。通過滾動來更改pageNum（頁碼）。
const size = computed(() => {
  return pageNum.value * pageSize.value > total
    ? total
    : pageNum.value * pageSize.value;
});
//加載更多函數(shù)，注意里面的打印信息。
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); // 模擬網(wǎng)絡(luò)延遲
};
function debounce(fn, delay, immediate = false) {
  let timer;

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

    // 如果設(shè)置了 immediate，并且這是第一次觸發(fā)，則立即執(zhí)行目標(biāo)函數(shù)
    if (immediate && !timer) {
      fn.apply(context, args);
    }

    // 清除之前的定時(shí)器
    if (timer) clearTimeout(timer);

    // 設(shè)置新的定時(shí)器
    timer = setTimeout(() => {
      if (!immediate) {
        fn.apply(context, args); // 如果沒有立即執(zhí)行，則在延遲后執(zhí)行
      }
      timer = null; // 清空定時(shí)器標(biāo)識符
    }, 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">
    <!-- 如果使用的是數(shù)組，可以將 size 換成 arr.slice(0, size) -->
    <div v-for="(item, index) in size" :key="index" class="square">
      {{ item }}
    </div>

    <!-- 末尾方式加載狀態(tài)，這里我使用的時(shí) t-design（騰訊組件庫） -->
    <t-loading :loading="loading" text="正在加載更多..." />
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
//總數(shù)據(jù)量
const total = ref(15);
//我們手動模擬分頁效果,
const pageSize = ref(5);
const pageNum = ref(1);
const loading = ref(false);
//使用計(jì)算屬性來更改size的值。通過滾動來更改pageNum（頁碼）。
const size = computed(() => {
  return pageNum.value * pageSize.value > total
    ? total
    : pageNum.value * pageSize.value;
});
//加載更多函數(shù)，注意里面的打印信息。
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); // 模擬網(wǎng)絡(luò)延遲
};
</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>