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) => {
console.log('新数据已加载:', newVal);
});
onUnmounted(() => {
window.removeEventListener('scroll', handleScroll);
});
}