diff --git a/src/renderer/views/artist/detail.vue b/src/renderer/views/artist/detail.vue
index bf7cf04..b6172aa 100644
--- a/src/renderer/views/artist/detail.vue
+++ b/src/renderer/views/artist/detail.vue
@@ -33,6 +33,7 @@
@play="handlePlay"
/>
{{ t('common.loading') }}
+
@@ -54,6 +55,7 @@
}"
/>
{{ t('common.loading') }}
+
@@ -114,6 +116,12 @@ const albumPage = ref({
hasMore: true
});
+// 无限滚动引用
+const songsLoadMoreRef = ref(null);
+const albumsLoadMoreRef = ref(null);
+let songsObserver: IntersectionObserver | null = null;
+let albumsObserver: IntersectionObserver | null = null;
+
// 加载歌手信息
const loadArtistInfo = async () => {
if (!artistId.value) return;
@@ -138,12 +146,12 @@ const loadArtistInfo = async () => {
const resetPagination = () => {
songPage.value = {
page: 1,
- pageSize: 30,
+ pageSize: 50,
hasMore: true
};
albumPage.value = {
page: 1,
- pageSize: 30,
+ pageSize: 50,
hasMore: true
};
songs.value = [];
@@ -181,6 +189,8 @@ const loadSongs = async () => {
songs.value = page === 1 ? newSongs : [...songs.value, ...newSongs];
songPage.value.hasMore = newSongs.length === pageSize;
songPage.value.page++;
+ } else {
+ songPage.value.hasMore = false;
}
} catch (error) {
console.error('加载歌曲失败:', error);
@@ -207,6 +217,8 @@ const loadAlbums = async () => {
albums.value = page === 1 ? newAlbums : [...albums.value, ...newAlbums];
albumPage.value.hasMore = newAlbums.length === pageSize;
albumPage.value.page++;
+ } else {
+ albumPage.value.hasMore = false;
}
} catch (error) {
console.error('加载专辑失败:', error);
@@ -229,29 +241,64 @@ const handlePlay = () => {
);
};
-// 添加滚动处理函数
-const handleScroll = useThrottleFn(() => {
- const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
- const windowHeight = window.innerHeight;
- const documentHeight = document.documentElement.scrollHeight;
+// 设置无限滚动观察器
+const setupIntersectionObservers = () => {
+ // 清除现有的观察器
+ if (songsObserver) songsObserver.disconnect();
+ if (albumsObserver) albumsObserver.disconnect();
- if (documentHeight - (scrollTop + windowHeight) < 100) {
- if (activeTab.value === 'songs') {
+ // 创建歌曲观察器
+ songsObserver = new IntersectionObserver((entries) => {
+ if (entries[0].isIntersecting && !songLoading.value && songPage.value.hasMore) {
loadSongs();
- } else if (activeTab.value === 'albums') {
+ }
+ }, { threshold: 0.1 });
+
+ // 创建专辑观察器
+ albumsObserver = new IntersectionObserver((entries) => {
+ if (entries[0].isIntersecting && !albumLoading.value && albumPage.value.hasMore) {
loadAlbums();
}
- }
-}, 200);
+ }, { threshold: 0.1 });
+
+ // 监听标签页更改,重新设置观察器
+ watch(activeTab, (newTab) => {
+ nextTick(() => {
+ if (newTab === 'songs' && songsLoadMoreRef.value && songPage.value.hasMore) {
+ songsObserver?.observe(songsLoadMoreRef.value);
+ } else if (newTab === 'albums' && albumsLoadMoreRef.value && albumPage.value.hasMore) {
+ albumsObserver?.observe(albumsLoadMoreRef.value);
+ }
+ });
+ });
+
+ // 监听引用元素的变化
+ watch(songsLoadMoreRef, (el) => {
+ if (el && activeTab.value === 'songs' && songPage.value.hasMore) {
+ songsObserver?.observe(el);
+ }
+ });
+
+ watch(albumsLoadMoreRef, (el) => {
+ if (el && activeTab.value === 'albums' && albumPage.value.hasMore) {
+ albumsObserver?.observe(el);
+ }
+ });
+};
-// 监听页面滚动
onMounted(() => {
loadArtistInfo();
- window.addEventListener('scroll', handleScroll);
+
+ // 添加nextTick以确保DOM已更新
+ nextTick(() => {
+ setupIntersectionObservers();
+ });
});
onUnmounted(() => {
- window.removeEventListener('scroll', handleScroll);
+ // 清理观察器
+ if (songsObserver) songsObserver.disconnect();
+ if (albumsObserver) albumsObserver.disconnect();
});
// 监听路由参数变化
@@ -260,6 +307,10 @@ watch(
(newId) => {
if (newId) {
loadArtistInfo();
+ // 添加nextTick以确保DOM已更新
+ nextTick(() => {
+ setupIntersectionObservers();
+ });
}
}
);
@@ -325,6 +376,10 @@ watch(
@apply text-center py-4 text-gray-500 dark:text-gray-400;
}
+ .load-more-trigger {
+ @apply h-4 w-full;
+ }
+
.artist-description {
.description-content {
@apply text-sm leading-relaxed whitespace-pre-wrap;