判断是否触底 hooks

import { ref, onMounted, onUnmounted, watch } from 'vue';

function useScrollBottomDetect() {
  const isLoading = ref(false);
  const hasMoreData = ref(true);
  const items = ref([]);

  onMounted(() => {
    const handleScroll = () => {
      if (document.documentElement.scrollHeight - document.documentElement.scrollTop === document.documentElement.clientHeight) {
        onReachBottom();
      }
    };

    function onReachBottom() {
      if (isLoading.value || !hasMoreData.value) {
        return;
      }
      console.log('触底了');
      // 在这里执行加载更多数据的操作
      isLoading.value = true;
      // 发送请求获取下一页数据
    }

    window.addEventListener('scroll', handleScroll);
  });

  watch(() => items.value, (newVal, oldVal) => {
    // 当新数据被加载时触发的回调函数，可以在这里执行一些更新UI的操作，例如渲染新数据等。
    console.log('新数据已加载:', newVal);
  });

  onUnmounted(() => {
    window.removeEventListener('scroll', handleScroll);
  });
}