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);
});
}
判断是否触底 hooks
最新推荐文章于 2024-05-02 17:59:36 发布