diff --git a/webapp/src/views/Home.vue b/webapp/src/views/Home.vue index a712f4b..3646875 100644 --- a/webapp/src/views/Home.vue +++ b/webapp/src/views/Home.vue @@ -173,13 +173,18 @@ 加载中... - + +

已加载全部图片 @@ -246,8 +251,8 @@ const router = useRouter() // 获取今日图片 const { image: todayImage, loading: todayLoading } = useTodayImage() -// 获取图片列表(使用服务端分页和筛选) -const { images, loading, hasMore, loadMore, filterByMonth } = useImageList(30) +// 获取图片列表(使用服务端分页和筛选,每页15张) +const { images, loading, hasMore, loadMore, filterByMonth } = useImageList(15) // 筛选相关状态 const selectedYear = ref('') @@ -258,6 +263,10 @@ const imageRefs = ref<(HTMLElement | null)[]>([]) const imageVisibility = ref([]) let observer: IntersectionObserver | null = null +// 无限滚动加载 +const loadMoreTrigger = ref(null) +let loadMoreObserver: IntersectionObserver | null = null + // 计算可用的年份列表(基于当前日期生成,从2020年到当前年份) const availableYears = computed(() => { const currentYear = new Date().getFullYear() @@ -360,16 +369,6 @@ const setupObserver = () => { }) } -// 初始化懒加载状态 -onMounted(() => { - // 初始化时设置 - if (images.value.length > 0) { - imageVisibility.value = new Array(images.value.length).fill(false) - setTimeout(() => { - setupObserver() - }, 100) - } -}) // 监听 images 变化,动态更新 imageVisibility watch(() => images.value.length, (newLength, oldLength) => { @@ -399,11 +398,51 @@ watch(() => images.value.length, (newLength, oldLength) => { } }) +// 设置无限滚动 Observer +const setupLoadMoreObserver = () => { + if (loadMoreObserver) { + loadMoreObserver.disconnect() + } + + loadMoreObserver = new IntersectionObserver( + (entries) => { + entries.forEach(entry => { + if (entry.isIntersecting && !loading.value && hasMore.value) { + loadMore() + } + }) + }, + { + root: null, + rootMargin: '100px', + threshold: 0.1 + } + ) + + if (loadMoreTrigger.value) { + loadMoreObserver.observe(loadMoreTrigger.value) + } +} + +// 初始化时设置无限滚动 +onMounted(() => { + if (images.value.length > 0) { + imageVisibility.value = new Array(images.value.length).fill(false) + setTimeout(() => { + setupObserver() + setupLoadMoreObserver() + }, 100) + } +}) + // 清理 onUnmounted(() => { if (observer) { observer.disconnect() } + if (loadMoreObserver) { + loadMoreObserver.disconnect() + } }) // 格式化日期 diff --git a/webapp/src/views/ImageView.vue b/webapp/src/views/ImageView.vue index 9b8588d..4419ed8 100644 --- a/webapp/src/views/ImageView.vue +++ b/webapp/src/views/ImageView.vue @@ -89,7 +89,7 @@