From a31603ec169eac92dd409530a43183ff5bffe025 Mon Sep 17 00:00:00 2001
From: Aaron_Zhou <clark1729@outlook.com>
Date: Sat, 22 Jun 2024 18:19:39 +0800
Subject: [PATCH] fix: should scroll the lyrics immediately when navigate to
 the playing page

---
 src/pages/PlayingNow/components/Lyrics.vue | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/pages/PlayingNow/components/Lyrics.vue b/src/pages/PlayingNow/components/Lyrics.vue
index e1da073..4204bd4 100644
--- a/src/pages/PlayingNow/components/Lyrics.vue
+++ b/src/pages/PlayingNow/components/Lyrics.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { onActivated, onMounted, ref, watch } from 'vue'
 import type { ApiLyric } from 'api'
 import { storeToRefs } from 'pinia'
 import { useLyricsStore, usePlaylistStore } from 'stores'
@@ -23,14 +23,19 @@ async function reloadLyrics() {
     }
 }
 
-watch(lyricsCurrentIndex, (currentIndex) => {
-    if (!containerRef.value || currentIndex < 0) return
-
+function onLiricsIndexChange(index: number) {
+    if (!containerRef.value || index < 0) return
     containerRef.value.scroll({
-        top: currentIndex * 56,
+        top: index * 56,
         behavior: 'auto'
     })
+}
+
+watch(lyricsCurrentIndex, (currentIndex) => {
+    onLiricsIndexChange(currentIndex)
 })
+onMounted(() => onLiricsIndexChange(lyricsCurrentIndex.value))
+onActivated(() => onLiricsIndexChange(lyricsCurrentIndex.value))
 </script>
 
 <template>