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 @@